Question

我正在构建一个导航栏，该导航栏在切换到移动设备时会响应。换句话说，在移动时折叠，然后在选择/单击导航按钮时，它应该路由到路径并将所有导航菜单折叠到切换样式栏。但是，下面是我得到的快照及其相关代码：

代码：

render() {
return (
  !this.state.isAuthenticating &&
  <div className="App">
    <Navbar fluid collapseOnSelect>
      <Navbar.Header>
        <Navbar.Brand>
         <LinkContainer to="/">
           <a>
           <img src={logo} alt="logo" height="70" width="75"/>
           <p>hybriData</p>
           </a>
         </LinkContainer>
        </Navbar.Brand>
        <Navbar.Toggle />
      </Navbar.Header>
      <Navbar.Collapse>
        <Nav pullRight>
          {this.state.isAuthenticated
            ? <Fragment>
                <LinkContainer to="/settings">
                  <NavItem>Settings</NavItem>
                </LinkContainer>
                <NavItem eventKey={1} onClick={this.handleLogout}>Logout</NavItem>
              </Fragment>
            : <Fragment>
                <LinkContainer to="/About Us">
                <NavItem eventKey={2}>About Us</NavItem>
                </LinkContainer>
                <LinkContainer to="/Contact">
                  <NavItem eventKey={3}>Contact</NavItem>
                </LinkContainer>
                <LinkContainer to="/works">
                  <NavItem eventKey={5}>Works</NavItem>
                </LinkContainer>
                <LinkContainer to="/signin">
                  <NavItem eventKey={6}>SignIn</NavItem>
                </LinkContainer>
              </Fragment>
          }
        </Nav>
      </Navbar.Collapse>
    </Navbar>
    </div>
  );
}

我还使用导航栏的扩展和onSelect道具以及nav的activeKey和onSelect道具集成了一些解决方案react-bootstrap how to collapse menu when item is selected，以实现所需的功能，但没有实现。当任何路径导航到，单击/选择时，如何实现折叠所有navitem的所需功能？谢谢

Answer 1

这是简化的working example。关于项目顺序。如果您查看bootstrap CSS，将会看到

之类的样式。

.nav > li {
  position: relative;
  display: block;
}}

>符号是一个选择器，用于选择所有直接后代或子代（仅限第一个“包装层”，不适用于第二个“包装层”），即如果有

<ul class="nav">
 <div>
  <li>something</li>
  <li>something</li>
 </div>
</ul>

不应用，而

<ul class="nav">
 <li>something</li>
 <li>something</li>
</ul>

有效。根据您的情况，请尝试将<Fragment>替换为<Nav>，然后卸下外侧的<Nav>。

您可能要修改的另一部分是包装了NavItem部分的LinkContainer。通常，我们有<li>（NavItem）包装了<a>（链接），但没有相反的方式。

尽管react-bootstrap使代码更易于阅读，但它抽象了细节，可能使工作变得更难。如果您在使用react-bootstrap时遇到困难，建议您坚持使用纯自举元素。代码稍长，但外观相同。您可以按照w3schools使用引导样式。

在移动设备上选择NavItem时，Nav不会崩溃

1 个答案: