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

Question

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

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 类用于显示可折叠菜单项。因此，任务是在单击汉堡包图标时有条件地添加 show 类。 只需按照这些简单的步骤即可实现此功能。

在您的状态中添加一个初始值为 false 的 showCollapsedMenu(名称由您决定)属性，如下所示:

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>

现在创建一个常量显示，它将根据 showCollapsedMenu 的状态有条件地添加显示类:

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

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

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

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