Bootstrap + React：导航栏切换器不起作用

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>
)

}

最后，我试图让导航标签（作为道具出现）在小屏幕时折叠成一个下拉按钮，以避免污染。 :)

Answer 1

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

对于带有 Bootstrap 的 React，您可能可以检查像 https://react-bootstrap.github.io/ 这样的库，这些库已重新构建以与 React 一起使用。