Question

我无法在我的React项目中使用bootstrap实现简单的汉堡包下拉，以使我的标头响应。

我在我的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）自己动手实施功能

3）[BEST]使用“react-bootstrap”包

如果你选择（3）你可以去这个链接： 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导航栏中实现汉堡包下拉列表

1 个答案: