将 bootstrap 5 组件导入 create-react-app

Question

Hi and thanks for the help, I'm using bootstrap 5 to style an app in react, but I'm having trouble including the bootstrap component js. Here I share the code of how I do the import.

import "bootstrap/dist/css/bootstrap.css";
import { Dropdown } from "bootstrap";

function App() {

  return (
      <div>
          <div className="dropdown">
            <a 
                className="btn btn-secondary dropdown-toggle" 
                href="#/" 
                role="button" 
                id="dropdownMenuLink" 
                data-bs-toggle="dropdown" 
                aria-expanded="false">
                   Dropdown link
           </a>

          <ul className="dropdown-menu" aria-labelledby="dropdownMenuLink">
             <li><a className="dropdown-item" href="#/">Action</a></li>
             <li><a className="dropdown-item" href="#/">Another action</a></li>
             <li><a className="dropdown-item" href="#/">Something else here</a></li>
         </ul>
       </div>
    </div>
  );
}

export default App;

When executing the code with npm start the app works fine and I have no problem with the bootstrap component the Dropdown displays. The problem is that in the console I receive a warning is the following:

WARNING in src\component\Sidebar.jsx Line 5:10: 'Dropdown' is defined but never used no-unused-vars

webpack 5.65.0 compiled with 1 warning in 696 ms

I understand that I have to define Dropdown somewhere, but I don't know where and how. I appreciate the help in advance. The solution to this question is a way to eliminate abstinence using good practice. Well, a simple solution is adding: // eslint-disable-next-line and esLint would not show it, but this is not a definitive solution.

• Using react bootstrap is not a solution

Update

https://codesandbox.io/s/loving-platform-q6sqy?file=/src/App.js example in codesandbox

Answer 1

Importing {Dropdown} means you are going to use it as a tag like this: <Dropdown> . If you want to use the dropdown class just like you are doing I guess just importing bootstrap would be enough. So you don't need the second import line.

Answer 2

This is correct, you should remove the second import as you import Dropdown class from the bootstrap library, not a React component, so this second import will not work. If you would like to use it as a React component, you need to install react-bootstrap.

Since you are using only bootstrap classes you are good to go, this first import is a correct way of importing bootstrap CSS into the project.

Answer 3

I have managed to import the js of the bootstrap 5 component, with no errors. Here the code

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/js/dist/dropdown.js";

function App() {
  return (
    <div>
      <div className="dropdown">
        <a
          className="btn btn-secondary dropdown-toggle"
          href="/"
          role="button"
          id="dropdownMenuLink"
          data-bs-toggle="dropdown"
          aria-expanded="false"
        >
          Dropdown link
        </a>

        <ul className="dropdown-menu" aria-labelledby="dropdownMenuLink">
          <li>
            <a className="dropdown-item" href="/">
              Action
            </a>
          </li>
          <li>
            <a className="dropdown-item" href="/">
              Another action
            </a>
          </li>
          <li>
            <a className="dropdown-item" href="/">
              Something else here
            </a>
          </li>
        </ul>
      </div>
    </div>
  );
}

export default App;