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

Question

我正在尝试使用语义-ui-react 菜单组件创建uild 菜单。但是我无法在 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 组件中访问我的状态？

How do I access my state inside semantic-ui-react components?

reactjs

semantic-ui