Twitter bootstrap 如何在导航栏中实现汉堡包下拉菜单

在我的React项目中，我很难使用bootstrap实现一个简单的汉堡包下拉列表，以使标题响应

我正在将原始css导入as so中的index.html中的引导

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

我在引导文档中尝试了崩溃的navbar解决方案，因为这似乎是最简单的，但似乎不起作用

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

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

类头扩展组件{
renderLinks（）{
如果（此.props.authenticated）{
//显示指向注销的链接
console.log（'这是电子邮件：'，this.props.email）；
返回(
[

退出
，

以{this.props.email}身份登录

]
);
}否则{
//显示登录或注销的链接
返回([

登录
，

注册

]
);
}
}
render（）{
返回(
品牌
w/dom

{this.renderLinks（）}

);
}
}
//下课

因为引导响应导航栏依赖于jQuery

您需要从以下选项中选择一个：

1） 包含jQuery

2） 自己实现react中的功能

3） [最佳]使用“react bootstrap”软件包

如果你选择（3） 您可以转到以下链接：

简单地用他们的例子：

<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>

链接
链接
行动
另一个动作
还有别的吗
分离环
链接权
链接权

因为引导响应导航栏依赖于jQuery

您需要从以下选项中选择一个：

1） 包含jQuery

2） 自己实现react中的功能

3） [最佳]使用“react bootstrap”软件包

如果你选择（3） 您可以转到以下链接：

简单地用他们的例子：

<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引导，但自动渲染会导致更多问题，特别是在样式方面。如何包含jquery？我已经安装了npm，但不确定接下来的步骤。我是否从“jquery”导入美元？如果是，在哪里？我在测试中使用过它，但没有在实际代码中使用。请详细说明“自动渲染问题”作为使用“react bootstrap”的最佳方法。但是如果您想包含jQuery，那么您可以在第一页中包含它，并将$分配给itOkay，在经过一些工具之后，我找到了删除自动样式的方法。它确实很管用。谢谢你的建议。@bigmugcup很好，如果有帮助的话，如果你接受我的回答，那就太好了：）我为react bootstrap汉堡菜单创建了一个代码沙盒，并把它作为一个例子放在这里。谢谢我尝试使用react引导，但自动渲染会导致更多问题，特别是在样式方面。如何包含jquery？我已经安装了npm，但不确定接下来的步骤。我是否从“jquery”导入美元？如果是，在哪里？我在测试中使用过它，但没有在实际代码中使用。请详细说明“自动渲染问题”作为使用“react bootstrap”的最佳方法。但是如果您想包含jQuery，那么您可以在第一页中包含它，并将$分配给itOkay，在经过一些工具之后，我找到了删除自动样式的方法。它确实很管用。谢谢你的建议。@bigmugcup很好，如果有帮助的话，如果你接受我的回答，那就太好了：）我为react bootstrap汉堡菜单创建了一个代码沙盒，并把它作为一个例子放在这里。