gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 14:17:17 25 4
gpt4 key购买 nike

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

我尝试在中间编写像 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 标签的内容显示在各自的选项卡中。请帮忙。我也是这门语言的新手。

最佳答案

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

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

关于reactjs - 如何显示选项卡内的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57305891/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com