Question

我正在尝试使用react-bootstrap呈现嵌套的Nav，只应在其作用域外的给定NavItem处于活动状态时才显示。如下所示：

<Nav bsStyle="tabs" stacked onSelect={this.onSelect.bind(this)}>
  <LinkContainer to="/foo">
    <NavItem href="#">Foo</NavItem>
  </LinkContainer>

  <li className="nested">
    <Nav bsStyle="tabs" stacked>
      <LinkContainer to="/foo/bar">
        <NavItem href="#">Foo/bar</NavItem>
      </LinkContainer>
    </Nav>
  </li>
</Nav>

我们的想法是在顶部li处于活动状态时显示上面的嵌套NavItem。

但是，如何在首次运行组件时找出哪个NavItem处于活动状态，以便将特殊的CSS类应用于嵌套的li？问题是onSelect未在活动导航项的Nav中触发，并且似乎没有明显的方法可以找到它。

我检查了NavItem（LinkContainer的孩子，Nav的孩子）的道具，其active道具未设为true什么时候应该。

编辑：我应该有资格知道如何实现这一点，而无需为拥有/控制嵌套的每个ref指定NavItem道具元件。

Answer 1

也许您应该使用Tabs，因此嵌套的<li>将位于您想要的Tab之下，并且只有在它处于活动状态时才会显示。

组件首次运行时的Active NavItem

1 个答案: