Question

我想制作一个有多个活动键的导航栏。以下是导航栏的代码。

<Nav bsStyle="pills" activeKey={1} onSelect={handleSelect}>
  <NavItem eventKey={1} href="/home">NavItem 1 content</NavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 content</NavItem>
  <NavItem eventKey={3} disabled>NavItem 3 content</NavItem>
</Nav>

我可以将activeKey Prop作为数组吗？

例如： - activeKey = [1,2,3]

Answer 1

不，似乎没有为activeKey <Nav>分配数组的方法;它只需要一个值。然而，其他元素似乎支持这一点，例如<Tabs>。不知道为什么会这样。

解决方案

你仍然可以通过一些细微的修改来完成你想要的东西。该解决方案根本不使用activeKey和eventKey。相反，我们使用一个数组，并且对于每个<NavItem>，我们检查数组中是否存在该索引;如果是的话，我们给它active道具。

查看this fiddle。

这是一个小提琴的片段。这里，activeKeys是一个数组，可以包含1,2,3或其中的任意组合。

<Nav bsStyle="pills">
  <NavItem active={activeKeys.indexOf(1) >= 0 ? true : false}>NavItem 1 content</NavItem>
  <NavItem active={activeKeys.indexOf(2) >= 0 ? true : false}>NavItem 2 content</NavItem>
  <NavItem active={activeKeys.indexOf(3) >= 0 ? true : false}>NavItem 3 content</NavItem>
</Nav>

official docs表明<NavItem>可以active道具：

有效 |输入：布尔 |默认值： false

React-Bootstrap：导航栏上的多个活动键

1 个答案:

解决方案