Question

我用Bootstrap创建了一个简单的导航菜单。在纯javascript中，它可以正常工作，但是当使其适应反应时，汉堡包图标将不起作用（单击时无任何反应）。我安装了引导程序

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>

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

Answer 1

引导程序 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>

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

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

现在，最后将这个节目添加到具有以下折叠navbar类的div中：

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

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

Answer 2

引导事件需要jQuery，Popper和Bootstrap.js source。该页面还将让您知道哪些组件需要JS。您可以在index.html文件中包含jQuery，Popper和bootstrap.js，并在其中加载包。要么添加它，要么简单地签出Reactstrap，它在React中实现了Bootstrap组件。

Answer 3

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

使用React和Bootstrap的响应式导航菜单-汉堡无法正常工作

3 个答案: