reactjs - 动态 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 是一个数组，其中包含有关按钮是否启用的信息。如果是，则显示按钮信息。

我调用这些选项卡的代码。

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

我不知道，为什么 eventKey 不能使用 index 值。我有什么想念的吗？也许是另一种方法？

Answer 1

显然经过一些尝试后，它开始工作了。

问题确实在eventKey中。

将 eventKey="0" 替换为 eventKey={0}

虽然我不知道它有什么不同。有人吗？