React中使用Bootstrap模板时JS文件无法生效的解决方法咨询

1. 先确认安装必要依赖 #

Bootstrap的JS组件依赖@popperjs/core，先通过包管理器安装这两个依赖：

npm install bootstrap @popperjs/core
# 用yarn的话执行下面这句
yarn add bootstrap @popperjs/core

2. 改用项目内导入JS文件 #

不要直接在public/index.html中引入外部JS，而是在React入口文件（比如src/index.js）里统一导入：

// 导入Bootstrap CSS（如果之前是在组件内导入，也可以移到这里统一管理）
import 'bootstrap/dist/css/bootstrap.min.css';
// 导入包含Popper的Bootstrap JS包，无需单独引入Popper
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

3. 检查组件结构是否符合Bootstrap规范 #

使用需要JS支持的组件（如下拉菜单、模态框）时，要确保结构和属性正确：

• 下拉菜单要给触发元素加data-bs-toggle="dropdown"属性
• 模态框触发按钮需要data-bs-toggle="modal"和data-bs-target="#你的模态框ID"属性，模态框容器也要对应设置ID

4. 排查冲突（可选） #

如果项目里引入了jQuery这类旧库，可能会和Bootstrap 5的JS产生冲突，React项目里建议移除不必要的jQuery依赖，Bootstrap 5本身已经不再依赖jQuery。

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