我如何在我的 React 导航栏中实现汉堡包下拉菜单

Question

我无法在我的 React 项目中使用 bootstrap 实现一个简单的汉堡包下拉菜单来使我的 header 响应。

我正在为我的 index.html 中的 Bootstrap 导入原始 css。

  <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">

我已经尝试了 bootstrap 文档中的折叠导航栏解决方案，因为这似乎是最简单的，但似乎不起作用。

我做错了什么？导入原始 CSS 是否有效，那么我应该使用 react-bootstrap 模块还是其他模块？

class Header extends Component {
  renderLinks() {
    if (this.props.authenticated) {
      // show link to signout
      console.log('here is the email: ', this.props.email);
      return (
        [
          <li className="nav-item" key={3}>
            <Link className="nav-link" to="/signout">Sign Out</Link>
          </li>,
          <li className="nav-item" key={4}>
              <p className="nav-link">Signed in as {this.props.email}</p>
          </li>
        ]
      );
    } else {
      // show link to sign in or sign out
    return ([
          <li className="nav-item" key={1}>
            <Link className="nav-link" to="/signin">Sign In</Link>
          </li>,
          <li className="nav-item" key={2}>
            <Link className="nav-link" to="/signup">Sign Up</Link>
          </li>
        ]
      );
    }
  }

  render() {
    return (
      <nav className="navbar navbar-expand-lg navbar-light bg-light">
        <Link to="/" className="navbar-brand"> Brand <br/><small>w/ react-router-dom</small></Link>

        <button
          className="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
           <span className="navbar-toggler-icon"></span>
        </button>
        <div className="navbar-collapse collapse" id="navbarNav">
          <ul className="navbar-nav">
            {this.renderLinks()}
          </ul>
        </ div>
      </nav>
    );
  }
}
// end of class

Answer 1

因为 bootstrap 响应式导航栏依赖于 jQuery

您需要从以下选项之一中做出决定：

1) 包括 jQuery

2) 自己实现react中的功能

3) [最佳] 使用 "react-bootstrap" 包

如果您选择 (3) 你可以去这个link： https://react-bootstrap.github.io/components/navbar/#navbars-mobile-friendly

并简单地使用他们的示例：

<Navbar inverse collapseOnSelect>
  <Navbar.Header>
    <Navbar.Brand>
      <a href="#brand">React-Bootstrap</a>
    </Navbar.Brand>
    <Navbar.Toggle />
  </Navbar.Header>
  <Navbar.Collapse>
    <Nav>
      <NavItem eventKey={1} href="#">
        Link
      </NavItem>
      <NavItem eventKey={2} href="#">
        Link
      </NavItem>
      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
        <MenuItem eventKey={3.1}>Action</MenuItem>
        <MenuItem eventKey={3.2}>Another action</MenuItem>
        <MenuItem eventKey={3.3}>Something else here</MenuItem>
        <MenuItem divider />
        <MenuItem eventKey={3.3}>Separated link</MenuItem>
      </NavDropdown>
    </Nav>
    <Nav pullRight>
      <NavItem eventKey={1} href="#">
        Link Right
      </NavItem>
      <NavItem eventKey={2} href="#">
        Link Right
      </NavItem>
    </Nav>
  </Navbar.Collapse>
</Navbar>

我如何在我的 React 导航栏中实现汉堡包下拉菜单

How do I implement a hamburger dropdown in my React navbar

twitter-bootstrap

reactjs

react-bootstrap

hamburger-menu