在React.js中使用Bootstrap Navbar

Question

我是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;

一切看起来都不错，但是当我单击菜单时，我希望它显示应该显示的内容，例如：不同的货币

我不知道该怎么做。

我不希望安装引导程序，并尽可能使用普通的引导程序而不是Ract引导程序

Answer 1

尽可能多地使用依赖于Jquery的引导程序，以便享受React的最大乐趣，建议您使用与ReactJs一起使用的react的引导程序版本。它很简单且易于遵循。

因此，如果您想尝试使用reactstrap（这是reactjs的引导程序变体），则可以访问https://reactstrap.github.io/或https://react-bootstrap.github.io/以熟悉reactstrap，然后按照其文档进行操作。

最好，可能会有所帮助。