在 React.js 中使用引导导航栏

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 的引导程序变体（ReactStrap 或 React Bootstrap）。它简单易懂。

要尝试或采用 reactstrap，您可以访问 https://reactstrap.github.io/ 或 https://react-bootstrap.github.io/ 以熟悉 reactstrap 并遵循其文档。

这可能会有所帮助，祝你好运。