Адаптивное меню навигации с React и Bootstrap - гамбургер не работает - PullRequest
Новая
       81

Адаптивное меню навигации с React и Bootstrap - гамбургер не работает

0 голосов
/ 10 декабря 2018

Я создал простое меню навигации с помощью Bootstrap.Он отлично работает в чистом javascript, но при адаптации его к реагированию значок гамбургера не работает (при нажатии ничего не происходит).Я установил загрузчик с 

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"

Мой jsx выглядит следующим образом: 

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

Опять же, все выглядит хорошо, за исключением того, что значок гамбургера не работает.

Ответы [ 2 ]

0 голосов
/ 10 декабря 2018

Согласно https://www.npmjs.com/package/bootstrap#whats-included, версия Bootstrap для npm не включает jQuery, но компонент navbar нуждается в этом, поэтому вам может потребоваться добавить https://www.npmjs.com/package/jquery в ваши зависимости.

0 голосов
/ 10 декабря 2018

Для событий начальной загрузки требуются jQuery, Popper и Bootstrap.js source .Эта страница также даст вам знать, какие компоненты требуют JS.Вы можете включить jQuery, Popper и bootstrap.js в файл index.html, куда вы загружаете свой пакет.Либо добавьте это, либо просто посмотрите Reactstrap , который реализует компоненты Bootstrap в React.

...