React项目中如何引入Bootstrap JS文件？Dropdown功能需依赖其运行

方案一：使用React Bootstrap（推荐） #

直接用官方封装的React版Bootstrap组件，完全适配React生态，避免原生JS与虚拟DOM的冲突：

• 安装依赖：

  npm install react-bootstrap bootstrap
  # 或用yarn
  yarn add react-bootstrap bootstrap
  

• 在项目入口文件（如src/index.js）导入Bootstrap CSS（若未导入）：

  import 'bootstrap/dist/css/bootstrap.min.css';
  

• 直接使用封装好的Dropdown组件：

  import { Dropdown, DropdownButton } from 'react-bootstrap';
  
  function MyDropdown() {
    return (
      <DropdownButton id="dropdown-basic-button" title="下拉菜单">
        <Dropdown.Item href="#/action-1">操作1</Dropdown.Item>
        <Dropdown.Item href="#/action-2">操作2</Dropdown.Item>
        <Dropdown.Item href="#/action-3">其他操作</Dropdown.Item>
      </DropdownButton>
    );
  }
  
  export default MyDropdown;
  

方案二：手动引入原生Bootstrap JS及依赖（不推荐） #

若坚持使用原生Bootstrap的Dropdown，需确保依赖齐全并正确初始化：

• 安装必需依赖：

  npm install jquery @popperjs/core
  # 或用yarn
  yarn add jquery @popperjs/core
  

• 在入口文件按顺序导入依赖：

  import $ from 'jquery';
  import Popper from '@popperjs/core';
  import 'bootstrap/dist/js/bootstrap.bundle.min';
  

• 在组件中使用原生结构并手动初始化（需配合React生命周期）：

  import { useEffect, useRef } from 'react';
  
  function NativeDropdown() {
    const dropdownRef = useRef(null);
  
    useEffect(() => {
      // 渲染完成后初始化Dropdown
      const dropdownInstance = new window.bootstrap.Dropdown(dropdownRef.current);
      // 组件卸载时销毁实例，避免内存泄漏
      return () => dropdownInstance.dispose();
    }, []);
  
    return (
      <div className="dropdown">
        <button 
          ref={dropdownRef}
          className="btn btn-secondary dropdown-toggle" 
          type="button" 
          id="dropdownMenuButton" 
          data-bs-toggle="dropdown" 
          aria-expanded="false"
        >
          下拉菜单
        </button>
        <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <li><a className="dropdown-item" href="#/action-1">操作1</a></li>
          <li><a className="dropdown-item" href="#/action-2">操作2</a></li>
          <li><a className="dropdown-item" href="#/action-3">其他操作</a></li>
        </ul>
      </div>
    );
  }
  
  export default NativeDropdown;
  

注意：原生Bootstrap JS基于jQuery操作DOM，与React虚拟DOM机制冲突，容易出现状态不同步、内存泄漏等问题，优先推荐方案一。

内容的提问来源于stack exchange，提问作者Ajay Birare