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

Question

我用 Bootstrap 创建了一个简单的导航菜单。它在 pure javascript 中工作正常，但是当将其调整为 react 时，汉堡包图标不起作用（点击时没有任何反应）。我用

安装了 bootstrap

npm install --save bootstrap

然后在 public 文件夹中添加 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>

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

Answer 1

Bootstrap 事件需要 jQuery、Popper 和 Bootstrap.js source. That page will also let you know which components require JS. You can include jQuery, Popper and bootstrap.js in the index.html file, where you load your bundle. Either add that, or simply check out Reactstrap，后者在 React 中实现了 Bootstrap 组件。

Answer 2

根据https://www.npmjs.com/package/bootstrap#whats-included, the npm version of Bootstrap doesn't include jQuery, but the navbar component needs it, so you might need to add https://www.npmjs.com/package/jquery您的依赖关系。

Answer 3

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

添加一个 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 的状态有条件地添加节目 class:

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

现在终于将此节目添加到 div 并折叠导航栏 class，如下所示：

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

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

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

Responsive navigation menu with React and Bootstrap - hamburger isn't working

twitter-bootstrap

reactjs

hamburger-menu

responsive