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

Question

我正在尝试创建一个包含三个选项卡的表单。现在选项卡已创建，我可以在它们之间切换，但无法弄清楚如何在选项卡内显示内容

我尝试在中间编写像 h1 这样的标记，但输出上没有显示任何内容。

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>
        )
    }
}

我希望 h1 标签的内容显示在各自的选项卡中。请帮忙。我也是这门语言的新手。

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>
        )
    }