反应响应导航菜单和引导-汉堡包不起作用
我创建了一个带有Bootstrap的简单导航菜单。它在纯javascript中运行得很好，但是当将它改编为function时，汉堡包图标就不能工作了(点击就什么都不会发生)。我安装了引导程序
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"我的联署材料如下：
<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>再一次，一切看起来都很好，除了汉堡图标没有发挥作用。
回答 3
Stack Overflow用户
发布于 2018-12-10 02:12:42
Stack Overflow用户
发布于 2020-02-27 20:00:36
引导显示类用于显示可折叠菜单项。因此，任务是简单地在单击汉堡包图标时添加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，它将根据showCollapsedMenu的状态有条件地添加show：
const show = (this.state.showCollapsedMenu) ? "show" : "" ;现在，最后将这个显示添加到div中，并将其折叠为navbar类如下所示：
<div className={"collapse navbar-collapse " + show} id="navbarNav">注意：混合jQuery和React是不建议的，因为它们对DOM的操作都不同。虽然这似乎是一个简单的解决办法，但它可能会导致更大的问题。
Stack Overflow用户
发布于 2018-12-10 02:13:41
根据https://www.npmjs.com/package/bootstrap#whats-included的说法，npm版本的Bootstrap不包括jQuery，但是navbar组件需要它，所以您可能需要将https://www.npmjs.com/package/jquery添加到依赖项中。
https://stackoverflow.com/questions/53698516
复制相似问题
腾讯云开发者
