将bootstrap 5组件导入create react应用程序

Question

Hi感谢您的帮助，我正在使用bootstrap 5在react中设计应用程序的样式，但在包含bootstrap组件js时遇到了问题。在这里，我分享如何进行导入的代码。

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;

当使用npm start执行代码时，应用程序运行良好，我对Dropdown显示的引导组件没有问题。问题是，在控制台中，我收到以下警告：

src\component\Sidebar.jsx第5:10行中的警告：定义了"Dropdown"，但从未使用过未使用的vars

webpack 5.65.0编译，696毫秒中有1个警告

我知道我必须在某个地方定义Dropdown，但我不知道在哪里以及如何定义。我很感激事先的帮助。解决这个问题的方法是通过良好的实践来消除禁欲。好吧，一个简单的解决方案是添加：// eslint-disable-next-line and esLint不会显示它，但这不是一个确定的解决方案。

• 使用react引导程序不是解决方案

更新

https://codesandbox.io/s/loving-platform-q6sqy?file=/src/App.jscodesandbox 中的示例

Answer 1

这是正确的，您应该在从引导程序库中导入Dropdown类时删除第二个导入，而不是React组件，因此第二次导入将不起作用。如果您想将其用作React组件，则需要安装React引导程序。

由于您只使用引导程序类，因此第一次导入是将引导程序CSS导入到项目中的正确方法。

Answer 2

导入｛Dropdown｝意味着您将使用它作为一个标签，如下所示：<Dropdown>。如果你想像现在这样使用下拉类，我想只导入引导程序就足够了。所以您不需要第二条导入线。

编辑：bootstrap下拉列表需要css和js引导。因此，使用import "bootstrap/dist/js/bootstrap.js" 删除第二个导入

Answer 3

我成功地导入了bootstrap 5组件的js，没有任何错误。这里的代码

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;