使用React和Bootstrap实现响应式导航菜单 - 汉堡菜单无法工作

Question

我用Bootstrap创建了一个简单的导航菜单。在纯javascript中运作正常，但是当我将其改为React时，汉堡图标无法使用（单击时没有任何反应）。我使用以下命令安装了Bootstrap：

npm install --save bootstrap

然后在public文件夹中的index.html中添加了Bootstrap CSS：

link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"

我的JSX代码如下：

       <nav className="navbar navbar-expand-sm navbar-dark bg-dark">
        <div className="container">
          <button className="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span className="navbar-toggler-icon"></span></button>
          <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav ml-auto">
              <li className="nav-item">
                <Link to="/app/portfolio" className="nav-link">PORTFOLIO</Link>
              </li>
              <li className="nav-item">
                <Link to="/app/about" className="nav-link">ABOUT</Link>
              </li>
              <li className="nav-item">
                <Link to="#create-head-section" className="nav-link" style={{fontStyle: 'italic'}}>Personal art</Link>
              </li>
              <li className="nav-item">
                <Link to="#share-head-section" className="nav-link">CONTACT</Link>
              </li>
            </ul>
        </div>
        </div>
      </nav>

再次确认，除了汉堡图标无法使用之外，一切看起来都很正常。

- sir-haver

Answer 1

Bootstrap中的show类用于显示可折叠菜单项。因此，任务就是在单击汉堡图标时有条件地添加show类。只需按照以下简单步骤即可实现此功能。

在状态中添加一个名为showCollapsedMenu（名称由您决定）的属性，并将其初始值设置为false，如下所示：

state={
    showCollapsedMenu: false
}

然后声明一个函数，如下所示，当调用该函数时，将翻转当前状态:

toggleMenu = () => {
    this.setState({
      showCollapsedMenu: !this.state.showCollapsedMenu
    })
}

当汉堡图标被单击时，上述函数将被调用。因此，请像这样实现汉堡图标上的onCLick方法：

<button
  className="navbar-toggler"
  type="button"
  onClick={this.toggleMenu}    // <=
  data-toggle="collapse"
  data-target="#navbarNav">
  <span className="navbar-toggler-icon"></span>
</button>

现在创建一个常量show，根据showCollapsedMenu的状态有条件地添加show类：

const show = (this.state.showCollapsedMenu) ? "show" : "" ;

现在最后，将这个展示添加到具有“collapse navbar”类的div中，就像这样：

<div className={"collapse navbar-collapse " + show} id="navbarNav">

注意：不建议将jQuery和React混合使用，因为它们都以不同的方式操作DOM。尽管这似乎是一种简单的解决方案，但可能会导致更大的问题。

- Ankush Chauhan

Answer 2

Bootstrap事件需要jQuery、Popper和Bootstrap.js 源代码。该页面还会告诉您哪些组件需要JS。您可以在加载包的index.html文件中包含jQuery、Popper和bootstrap.js。要么添加它，要么只需查看Reactstrap，它在React中实现了Bootstrap组件。

- Predrag Beocanin

---

谢谢，伙计，它正在工作。 只是在公共文件夹中的index.html的body中添加了“script src…”。 - sir-haver

Answer 3

根据https://www.npmjs.com/package/bootstrap#whats-included，Bootstrap的npm版本不包括jQuery，但是导航栏组件需要它，因此您可能需要将https://www.npmjs.com/package/jquery添加到依赖项中。

- floydwch

---

谢谢，我刚把脚本添加到了index.html的body中。 - sir-haver