我需要一些在标签之间切换的帮助。我附上一张图片，以帮助说明我的意思。我尝试了许多不同的方法来完成此操作，但是我遇到了麻烦。请允许我解释一下：
我创建了一个json文件，将这5个选项卡保存在对象数组中。每个人都有一个ID和一个名字。我通过在父组件（navbar组件）中通过此数组进行映射来动态创建每个选项卡组件。我这样做的原因是这样，以后我可以轻松地向我的.json文件中添加更多标签，并且它会自动添加更多标签组件，而无需对其进行编码。我想要一个动态的解决方案，而不是一个静态的解决方案一。
[
{
"id": 0,
"name": "Home"
},
{
"id": 1,
"name": "About"
},
{
"id": 2,
"name": "Skills"
},
{
"id": 3,
"name": "Projects"
},
{
"id": 4,
"name": "Games"
}
]
export default class Navigation extends React.Component {
buildTabs = (tab) => {
return(
<Tab
key={tab.id}
id={tab.id}
name={tab.name}
/>
);
}
render() {
return(
<div style={style}>
{TabJSON.map(this.buildTabs)}
</div>
);
}
}
我试图在选项卡组件本身中设置一个选定状态，但是当我单击一个新选项卡时，上一个选项不会消失。它将只是单独打开它们，这不是我想要的。我希望他们切换选中状态，然后从其他状态中删除该状态，就像应该使用一个标签一样。
export default class Tab extends React.Component {
state = {
selected: this.props.id === 0 ? 'selected' : ''
}
tabClicked = (tab) => {
this.setState({
selected: 'selected'
});
}
render() {
return(
<div
id={this.props.id}
className={`tab ${this.state.selected}`}
onClick={this.tabClicked}
>{this.props.name}
</div>
);
}
}
我尝试从父组件（导航栏）管理此状态，以便可以在兄弟选项卡组件之间进行通信，但是遇到另一个问题。所有组件都一起选择打开或关闭，而不管我单击哪个组件都独立。
抱歉，很长的信息，希望有人能帮助我。
您选择的状态必须在父组件内部。例如，您可以在Tab中添加onClick prop函数：
export default class Tab extends React.Component {
render() {
const { id, onClick, selectedTab } = this.props;
return (
<div
id= {id}
className = {`tab ${id === selectedTab ? 'selected' : ''}`}
onClick = {onClick}
>
{ this.props.name }
</div>
);
}
}
然后从父组件（导航）中控制“选定”选项卡，将当前选定的选项卡传递给每个组件，如下所示：
export default class Navigation extends React.Component {
state = {
selectedTab: 0
}
onClickTab = id => () => {
this.setState({ selectedTab: id });
}
buildTabs = (tab) => {
return(
<Tab
key={tab.id}
id={tab.id}
name={tab.name}
onClick={this.onClickTab(tab.id)}
selectedTab={this.state.selectedTab}
/>
);
}
render() {
return(
<div style={style}>
{TabJSON.map(this.buildTabs)}
</div>
);
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句