Question

我正在尝试使用semantic-ui-react菜单组件构建菜单。但我无法在Menu.Item组件中使用我的状态来显示单个菜单项。如何在Menu.Item中使用我的状态

class JobTabs extends React.Component{

  constructor(props){
    super(props);

    this.state={
      tabs: [
        {title: 'Tab 1', index: 0},
        {title: 'Tab 2', index: 1},
        {title: 'Tab 3', index: 2}
      ],

      activeTab: 0
    }

    this.renderTab = this.renderTab.bind(this);
  }

  renderTab(){
    return this.state.tabs.map((tab) => {
      return (
        <Menu.Item
          name={tab.name}
          key={tab.index}
          active={this.state.activetab === tab.index} />
      );
    })
  }

  render() {
    return (
      <Menu tabular>
        {this.renderTab()}
      </Menu>
    );
  }
}

Answer 1

使用标题代替名称

 class JobTabs extends React.Component{

      constructor(props){
        super(props);

        this.state={
          tabs: [
            {title: 'Tab 1', index: 0},
            {title: 'Tab 2', index: 1},
            {title: 'Tab 3', index: 2}
          ],

          activeTab: 0
        }

        this.renderTab = this.renderTab.bind(this);
      }

      renderTab(){
        return this.state.tabs.map((tab) => {
          return (
            <Menu.Item
              name={tab.title}
              key={tab.index}
              active={this.state.activeTab === tab.index} />
          );
        })
      }

      render() {
        return (
          <Menu tabular>
            {this.renderTab()}
          </Menu>
        );
      }
    }

如何在语义-ui-react组件中访问我的状态？

1 个答案: