Reactjs 带有React和Bootstrap的响应式导航菜单-汉堡包isn'；行不通

我用引导创建了一个简单的导航菜单。它在纯javascript中工作得很好，但在将其改编为react时，汉堡图标不起作用（单击时不会发生任何事情）。我安装了带有

npm install --save bootstrap

然后将引导css添加到公用文件夹中的index.html：

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>

文件夹


关于


个人艺术


接触

---

同样，除了汉堡包图标不起作用外，一切看起来都很好。

引导事件需要jQuery、Popper和Bootstrap.js。该页面还将让您知道哪些组件需要JS。您可以将jQuery、Popper和bootstrap.js包含在

index.html

文件中，从中加载包。要么添加它，要么简单地签出它，它在React中实现了引导组件

根据，npm版本的引导不包括jQuery，但navbar组件需要它，因此您可能需要添加到依赖项中。

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

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

state={
    showCollapsedMenu: false
}

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

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

然后声明这样一个函数，调用该函数时将反转当前状态：

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

只要单击汉堡图标，就会调用上述函数。因此，在汉堡图标上实现onCLick方法，如下所示：

state={
    showCollapsedMenu: false
}

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

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

现在，最后使用collapse navbar类将此show添加到div中，如下所示：

state={
    showCollapsedMenu: false
}

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

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

---

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

谢谢，伙计，它正在工作，只是将“script src…”添加到了公共文件夹中index.html的主体中。谢谢，我刚刚将脚本添加到index.html的主体中