带有 React 和 Bootstrap 的响应式导航菜单 - 汉堡包不起作用

Question

我用 Bootstrap 创建了一个简单的导航菜单。它在纯 javascript 中运行良好，但是在将其调整为 react 时，汉堡包图标不起作用（单击时没有任何反应）。我安装了引导程序

npm install --save bootstrap

然后将 bootstrap css 添加到 public 文件夹中的 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>

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

Answer 1

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

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

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

现在终于将这个节目添加到带有折叠导航栏类的 div 中，如下所示：

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

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