如何在語義反饋組件中訪問我的狀態？

Question

我正在嘗試使用semantic-ui-react Menu組件構建菜單。但我無法在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> 
     ); 
     } 
    }