Question

所以，我有这个无状态组件，我一直在尝试将Bootstrap集成到我的代码中。我用vanilla 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一起使用。

Bootstrap + React：导航栏切换器无法正常工作

1 个答案: