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}

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

动态EventKey无法正常工作React-Bootstrap

1 个答案: