Использование Bootstrap Navbar в React. js - PullRequest
Новая
       8

Использование Bootstrap Navbar в React. js

0 голосов
/ 17 января 2020

Я новичок в React, и я хочу, чтобы некоторые меню выпадали, когда я щелкаю по нему. Но я застрял в том, чтобы все выглядело так, как должно быть, но не могу найти ответ, чтобы заставить его действительно работать.

Я прикрепил следующую ссылку в папку html: 


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

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

import React, { Component } from 'react';

class Nav extends Component {
  render() {
    return (
      <div>
      <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <a className="navbar-brand" href="#">holidaylettings</a>
          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
        <div className="collapse navbar-collapse" id="navbarNavDropdown">
          <ul className="ml-auto navbar-nav">
            <li className="nav-item">
              <a className="nav-link" href="#">My shortlist <span className="sr-only">(current)</span></a>
            </li>
            <li className="nav-item currency">
              <a className="nav-link dropdown-toggle" href="#" id="navbarDropdownCurrencyLink" data-toggle="currency" aria-haspopup="true" aria-expanded="false">GBP</a>
            </li>
            <li className="nav-item">
              <a className="nav-link" href="#">Manage my booking</a>
            </li>
            <li className="nav-item help">
              <a className="nav-link dropdown-toggle" href="#" id="navbarDropdownHelpLink" data-toggle="help" aria-haspopup="true" aria-expanded="false">Help</a>
            </li>
            <li className="nav-item entry">
              <a className="nav-link dropdown-toggle" href="#" id="navbarDropdownEntryLink" data-toggle="entry" aria-haspopup="true" aria-expanded="false">Sign in</a>
            </li>
            <li className="nav-item">
              <a className="nav-link" href="#">
                List your property
              </a>
              <div className="dropdown-menu" aria-labelledby="navbarDropdownCurrencyLink">
                <a className="dropdown-item" href="#">GBP</a>
                <a className="dropdown-item" href="#">USD</a>
                <a className="dropdown-item" href="#">CHF</a>
                <a className="dropdown-item" href="#">EUR</a>
              </div>

              <div className="dropdown-menu" aria-labelledby="navbarDropdownHelpLink">
                <a className="dropdown-item" href="#">Travellers</a>
                <a className="dropdown-item" href="#">Manage existing bookings</a>
                <a className="dropdown-item" href="#">Common questions</a>
                <a className="dropdown-item" href="#">Owners</a>
                <a className="dropdown-item" href="#">Common question</a>
                <a className="dropdown-item" href="#">Search</a>
              </div>

              <div className="dropdown-menu" aria-labelledby="navbarDropdownEntryLink">
                <a className="dropdown-item" href="#">Travellers</a>
                <a className="dropdown-item" href="#">Owners/Managers</a>
              </div>
            </li>
          </ul>
        </div>
      </nav>
      </div>
    );
  }
}

export default Nav;

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

У меня нет знаю, как это сделать.

Я бы НЕ хотел устанавливать загрузчики и предпочел бы использовать простой Bootstrap вместо Ract один, если это возможно

1 Ответ

1 голос
/ 17 января 2020

Если вы хотите использовать bootstrap, который зависит от Jquery, для того, чтобы насладиться лучшим из React, рекомендуется использовать вариант bootstrap, который лучше всего работает с ReactJs (ReactStrap или React Bootstrap). Это просто и легче следовать.

Чтобы попробовать или принять реакционную ленту, вы можете посетить https://reactstrap.github.io/ или https://react-bootstrap.github.io/, чтобы ознакомиться с реактивной лентой, а затем следовать ее документации.

Это может быть полезно, всего наилучшего.

...