如何显示选项卡内的内容？

Question

I am trying to create a form with three tabs.Now the tabs are created and i am able to switch between them but can not figure out how to display contents inside a tab

I have tried writing markup tags like h1 in between but nothing is shown on the output.

export class Stackreact extends Component {
    constructor(props) {
        super(props);
        this.state = { value: '1' }
    }

    handle_change = (value) => {
        this.setState({ value })
    }

    render() {
        return (
            <div>

                <Tabs value={this.state.value} onChange={(e, v) => { this.handle_change(v) }} indicatorColor="primary"
                    textColor="primary" centered>
                    <Tab value='1' label='BASIC DETAILS'><h1>First Tab</h1></Tab>
                    <Tab value='2' label='CONTACT DETAILS'><h1>Second Tab</h1></Tab>
                    <Tab value='3' label='MORE DETAILS'><h1>Third tab</h1></Tab>
                </Tabs>
            </div>
        )
    }
}

I want the contents of h1 tags to be displayed in their respective tabs. Please help.Also i am new to this language.

Answer 1

经过大量工作后，我想出了这个工作正常的解决方案。

render() {
        let content_array = [<h1>First Tab</h1>, <h1>Second Tab</h1>, <h1>Third Tab</h1>];
        return (
            <div>
                <Tabs value={this.state.value} onChange={(e, v) => { this.handle_change(v) }} indicatorColor="primary"
                    textColor="primary" centered>
                    <Tab value='1' label='BASIC DETAILS'></Tab>
                    <Tab value='2' label='CONTACT DETAILS'></Tab>
                    <Tab value='3' label='MORE DETAILS'></Tab>
                </Tabs>
                <Paper>
                    {content_array[this.state.value - 1]}
                </Paper>
            </div>
        )
    }