导航栏切换按钮无法使用 Bootstrap 4.5.3 做出反应

Question

为什么我的切换按钮不起作用。 我正在创建一个React 应用程序？ 请帮助我应该尝试使用 ul li 标签还是有任何库可以使响应式导航栏做出反应？

import React from "react";
import { Link, NavLink } from "react-router-dom";

const NavBar = ({ user }) => {
  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
      <Link className="navbar-brand" to="/">
        MoviesLix
      </Link>
      <button
        className="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNavAltMarkup"
        aria-controls="navbarNavAltMarkup"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span className="navbar-toggler-icon"></span>
      </button>
      <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div className="navbar-nav">
          <NavLink className="nav-link" to="/movies">
            Movies<span className="sr-only">(current)</span>
          </NavLink>
          <NavLink className="nav-link" to="/customers">
            Customers
          </NavLink>
          <NavLink className="nav-link" to="/rentals">
            Rentals
          </NavLink>
          {!user && (
            <React.Fragment>
              <NavLink className="nav-link" to="/login">
                Login
              </NavLink>
              <NavLink className="nav-link" to="/register">
                Register
              </NavLink>
            </React.Fragment>
          )}
          {user && (
            <React.Fragment>
              <NavLink className="nav-link" to="/profile">
                {user.name}
              </NavLink>
              <NavLink className="nav-link" to="/logout">
                Logout
              </NavLink>
            </React.Fragment>
          )}
        </div>
      </div>
    </nav>
  );
};

export default NavBar;

当单击按钮导航栏未在移动设备 rest 中打开时，一切正常，我不知道为什么会这样

Answer 1

React 基本上与组件及其生命周期一起工作。 要将 Bootstrap 与它一起使用，您应该使用 npm 或 yarn 安装 Bootstrap 和 React Bootstrap 模块，如下所示：

使用 Yarn： yarn add react-bootstrap bootstrap

使用 NPM: npm install react-bootstrap bootstrap

之后，您可以访问 React Bootstrap 文档以了解如何使用它的组件。 您可以单击此处访问它。

您的代码的主要问题是您试图通过引导程序的香草方法使用切换。 它是为了与 vanilla JavaScript 一起工作而 React 不会像 JQuery 那样理解它。

您必须创建 React 组件的 state 和 controller function，然后验证 state 以呈现您的导航或隐藏它。 你可以看看我写给你的这个例子：

  const [toggle, setIsToggled] = useState(() => false); // this is a react hook to handle component states
  
  function handleToggleNavbar() { // this function is the controller of your toggle button
    setIsToggled(currentStateValue => { // useState returns a callback with the current state value
      return !currentStateValue; //inverting the toggle state value
    });
  }