反应帮助在标签之间切换

如何解决反应帮助在标签之间切换

我需要一些在标签之间切换的帮助。我附上一张图片，以帮助说明我的意思。我尝试了许多不同的方法来实现这一目标，但我一直陷于困境。请允许我解释一下：

image of tabs

我创建了一个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>
    );
  }
}

我尝试通过父组件（导航栏）管理此状态，以便可以在兄弟选项卡组件之间进行通信，但是遇到另一个问题。所有组件都一起选择打开或关闭，而不管我单击哪个组件都独立。

很抱歉，希望您能给我个帮助。

解决方法

您的 selected 状态必须在父组件内部。例如，您可以在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>
    );
  }
}