导航栏切换按钮在使用 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;

当点击按钮导航栏没有在移动休息中打开时一切正常我不知道为什么会发生这种情况

Answer 1

React 基本上适用于组件及其生命周期。要使用 Bootstrap，您应该使用 npm 或 yarn 安装 Bootstrap 和 React Bootstrap 模块，如下所示：

使用纱线： yarn add react-bootstrap bootstrap

使用 NPM： npm install react-bootstrap bootstrap

之后，您可以访问 React Bootstrap 文档以了解如何使用它的组件。您可以访问它clicking here。

您的代码的主要问题是您试图通过引导程序的 vanilla 方法使用切换。它被设计用于原生 JavaScript，而 React 无法像 JQuery 那样理解它。

您必须创建一个 React 组件的状态和一个控制器函数，然后验证状态以呈现您的导航或隐藏它。你可以看看我写给你的这个例子：

  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
    });
  }