Question

我在Navbar中嵌套了以下代码：

<Navbar inverse collapseOnSelect fixedTop fluid>
  <Navbar.Collapse>
    <Nav onSelect={this.props.onSelect} pullRight>
      <NavItem eventKey={'navItem1'}>NavItem 1</NavItem>
      <NavItem eventKey={'navItem2'}>NavItem 2</NavItem>

      <NavDropdown eventKey={'dropdown1'} title="Dropdown1" id="basic-nav-dropdown">
        <MenuItem eventKey={'placeholder1'}>Placeholder</MenuItem>
        <MenuItem divider />
        <MenuItem eventKey={'placeholder2'}>Placeholder</MenuItem>
      </NavDropdown>

      <NavDropdown eventKey={'dropdown2'} title="Dropdown2" id="basic-nav-dropdown-2">
        <MenuItem eventKey={'placeholder3'}>Placeholder</MenuItem>
        <MenuItem divider />
        <MenuItem eventKey={'placeholder4'}>Placeholder</MenuItem>
      </NavDropdown>

      <NavDropdown eventKey={'dropdown3'} title="DropDown3" id="basic-nav-dropdown-3">
        <MenuItem eventKey={'placeholder5'}>Placeholder</MenuItem>
        <MenuItem divider />
        <MenuItem eventKey={'placeholder6'}>Placeholder</MenuItem>
      </NavDropdown>
    </Nav>
  </Navbar.Collapse>
</Navbar>

我面临的问题是只有Dropdown1会显示下拉列表。在使用我的ChromeTools查看问题时，似乎其他两个下拉菜单没有打开＆＃34;打开＆＃34;课程加入了他们。

有什么建议吗？

Answer 1

您的NavDropdown组件本身没有事件键，它们只有标题和ID值。它应该是这样的：

  <NavItem eventKey={1}>NavItem 1</NavItem>
  <NavItem eventKey={2}>NavItem 2</NavItem>

  <NavDropdown eventKey={3} title="Dropdown1" id="basic-nav-dropdown">
    <MenuItem eventKey={3.1}>Placeholder</MenuItem>
    <MenuItem divider />
    <MenuItem eventKey={3.2}>Placeholder</MenuItem>
  </NavDropdown>

  <NavDropdown eventKey={4} title="Dropdown2" id="basic-nav-dropdown-2">
    <MenuItem eventKey={4.1}>Placeholder</MenuItem>
    <MenuItem divider />
    <MenuItem eventKey={4.2}>Placeholder</MenuItem>
  </NavDropdown>

我可以不使用多个NavDropdown吗？

1 个答案: