Bootstrap + React: не работает тумблер navbar

Question

Итак, у меня есть этот компонент без сохранения состояния, и я пытаюсь интегрировать Bootstrap в мой код.Я сделал это в ванильных HTML / CSS и JS, и он отлично работает.Однако по какой-то причине data-target = "# navigation-bar" моей кнопки, когда экран меньше определенной ширины, не получает информацию из класса с тем же идентификатором.Вот код компонента ниже.Буду признателен за любую помощь.

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 для отображения страницы на основе изменений, произошедших со времени предыдущего рендеринга.

Для React с Bootstrap вы, вероятно, можете проверить библиотеки, например https://react -bootstrap.github.io /, которые перестроены для работы с React.