我在 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
值。
我有什么想念的吗?也许是另一种方法?
最佳答案
显然经过一些尝试后,它开始工作了。
问题确实在eventKey
中。
将 eventKey="0"
替换为 eventKey={0}
虽然我不知道它有什么不同。有人吗?
关于reactjs - 动态 EventKey 不工作 React-Bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43098120/