javascript - 引导+ react : navbar toggler not working

Question

所以，我有这个无状态组件，并且我一直在尝试将 Bootstrap 集成到我的代码中。我用普通的 HTML/CSS 和 JS 做了这个，效果很好。但是，由于某种原因，当屏幕小于一定宽度时，我的按钮的 data-target="#navigation-bar"不会从具有相同 id 的类中获取信息。下面是该组件的代码。任何帮助将不胜感激。

const Navigation = (props) => {
const navNames = props.tabs.map(tab => {
    return <li className="nav-item" key={`${tab}`}><a className="nav-link" href={`${tab}`}>{tab}</a></li>
})
return (
  <nav className="navbar navbar-expand-lg fixed-top">
    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation-bar">
      <span className="navbar-toggler-icon">&#9776;</span>
  </button>
  <div className="collapse navbar-collapse" id="navigation-bar">
    <ul className="navbar-nav ml-auto">
      {navNames}
    </ul>
  </div>
  </nav>
)

}

最终，我试图让导航选项卡(作为 Prop 出现)在屏幕较小时折叠成一个下拉按钮，以避免污染。 :)

Answer 1

所以，React 和 vanilla Bootstrap 并不能很好地混合。 Bootstrap 应该在 DOM 元素发生变化时改变 DOM 元素。 React 有虚拟 DOM 的概念，可以根据自上次渲染以来发生的更改来渲染页面。

对于使用 Bootstrap 进行 React，您可以检查类似 https://react-bootstrap.github.io/ 的库，它们被重建以与 React 一起使用。