引导程序和导航栏崩溃不起作用反应（创建反应应用程序）

Question

I'm trying to use: bootstrap 4 navbar and it wouldn't collapse on react. https://getbootstrap.com/docs/4.0/components/navbar/#supported-content

could someone explain why? I'm assuming this could be because will need to amend to components to change states? but it is just my guess.

import React from "react";
import ReactDOM from "react-dom";

import registerServiceWorker from "./registerServiceWorker";
// styles
import "../node_modules/jquery/dist/jquery.min.js";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

ReactDOM.render(
<nav className="navbar navbar-expand-lg navbar-light bg-light">
  <a className="navbar-brand" href="#">Navbar</a>
  <button  className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span  className="navbar-toggler-icon"></span>
  </button>

  <div  className="collapse navbar-collapse" id="navbarSupportedContent">
    <ul  className="navbar-nav mr-auto">
      <li  className="nav-item active">
        <a  className="nav-link" href="#">Home <span  className="sr-only">(current)</span></a>
      </li>
      <li  className="nav-item">
        <a  className="nav-link" href="#">Link</a>
      </li>
      <li  className="nav-item dropdown">
        <a  className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div  className="dropdown-menu" aria-labelledby="navbarDropdown">
          <a  className="dropdown-item" href="#">Action</a>
          <a  className="dropdown-item" href="#">Another action</a>
          <div  className="dropdown-divider"></div>
          <a  className="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li  className="nav-item">
        <a  className="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form  className="form-inline my-2 my-lg-0">
      <input  className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"/>
      <button  className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
, document.getElementById("root"));
registerServiceWorker();

Answer 1

Try adding bootstrap.js in your import s after you import jquery :

import "../node_modules/jquery/dist/jquery.min.js";
import "../node_modules/bootstrap/dist/js/bootstrap.min.js";

Answer 2

The best solution for me was to import only the bootstrap collapse.js script in the navbar component to prevent mixing js scripts.

Include this at the top of your navbar.jsx component:

import "bootstrap/js/src/collapse.js";

Answer 3

只需在 bootstrap.min.css 之后导入 bootstrap.min.js

import "bootstrap/dist/js/bootstrap.min.js";

Answer 4

If it is Bootstrap v3, maybe try to change class navbar-toggler to navbar-toggle .

On npm page Bootstrap 3.3.7 is latest version..

Answer 5

If you use react be sure that NavbarToggle and NavbarCollapse are inside the Navbar tag

<Navbar expand="lg">
    <NavbarToggle aria-controls="basic-navbar-nav" />
    <NavbarOffcanvas>
        <Nav>
            <Nav.Item>
                <Nav.Link eventKey={TPL_TABS.ACCEPTED} href="/">Accepted</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey={TPL_TABS.ARCHIVE} href="/">Archive</Nav.Link>
            </Nav.Item>
        </Nav>
    </NavbarOffcanvas>
</Navbar>