ダイナミックEventKeyが動作しないReact-Bootstrap

Question

React-Bootstrapで動的にタブをレンダリングしていますが、どういうわけかeventKeyは値を認識せず、タブはクリックできません。 コードは次のとおりです。

ここ

var tabButtons = tabsList.map(function(text, index){ 
         if(text.enabled==1) 
         { 
         return <NavItem eventKey={index} key={index}><center> {text.value}</center></NavItem>; } 
         }); 

tabListボタンが有効になっているかどうかについての情報を含む配列です。はいの場合は、ボタン情報を表示します。

私がこれらのタブを呼び出すコード。 index値を使用することができeventKeyない理由

render() { 

     return (
      <div> 
       <Tab.Container id="tab" defaultActiveKey="0"> 
       <Row className="show-grid"> 
        <Col sm={12}> 
        <Nav bsStyle="tabs" justified> 
         {tabButtons} 
        </Nav> 
        </Col> 

        <Col sm={12}> 
        <Tab.Content animation> 
         <Tab.Pane eventKey="0"> 
         <FirstTabContent /> 
         </Tab.Pane> 
         <Tab.Pane eventKey="1"> 
         Second 
         </Tab.Pane> 
         <Tab.Pane eventKey="2"> 
         <ThirdTabContent /> 
         </Tab.Pane> 


        </Tab.Content> 
        </Col> 
       </Row> 
       </Tab.Container> 
      </div> 
      ); 

私は、見当がつかない。 私が紛失しているものは何ですか？おそらく別のアプローチですか？

Answer 1

明らかにヒットして試してみたら、うまくいきました。

問題は確かにeventKeyにありました。私はそれが作るものの違いはわかりませんけれども

はeventKey={0}

でeventKey="0"を置き換え。誰でも？