Dynamic EventKey funktioniert nicht React-Bootstrap

Question

Ich Rendern meine Registerkarten in React-Bootstrap dynamisch, aber irgendwie die eventKey erkennt die Werte nicht und die Registerkarten sind nicht anklickbar. Hier ist der Code.

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

tabList Hier ist ein Array, das über Informationen enthält, ob die Taste aktiviert ist. Wenn ja, dann zeigen Sie die Informationen zur Schaltfläche an.

Der Code, wo ich diese Registerkarten aufrufen.

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> 
      ); 

Ich habe keine Ahnung, warum nicht das sind eventKey der Lage, die index Werte zu verwenden. Alles, was ich vermisse? Ein anderer Ansatz vielleicht?

Answer 1

Anscheinend nach ein paar Treffern und versucht, hat es funktioniert.

Das Problem war in der Tat in eventKey.

eventKey="0" Ersetzt durch eventKey={0}

Obwohl ich keine Ahnung, was Unterschied es macht haben. Jemand?