React项目添加必要脚本后Bootstrap 5下拉按钮仍无法正常工作求助

数据老陈

2026-10-5

问题排查与解决方案

核心问题根因

版本严重不匹配：你代码中使用的是Bootstrap 5专属的data-bs-toggle下拉触发属性，但实际在头部引入的CSS是Bootstrap 4.5.3版本，两个大版本的API、属性名、样式规则完全不兼容，导致下拉逻辑无法触发。
缺失Bootstrap功能脚本：你仅引入了Bootstrap的CSS样式文件，没有引入对应版本的JS功能文件，下拉等交互组件依赖Bootstrap的JS逻辑和Popper定位库才能运行。
Bootstrap 5已经不再依赖jQuery，额外引入jQuery不会对下拉功能产生帮助，属于冗余引入。

修复步骤

步骤1：替换为Bootstrap 5的CSS资源，替换原有旧版Bootstrap CSS链接：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

步骤2：在index.html的</body>闭合标签前引入Bootstrap 5的bundle JS文件，内置了下拉需要的Popper定位库，无需额外引入其他依赖：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

步骤3：如果仍无法触发，可在当前下拉组件的生命周期中手动初始化下拉实例：
如果你用的是函数组件，添加如下useEffect逻辑：

import { useEffect } from 'react'
import { Dropdown } from 'bootstrap'

function YourComponent() {
  useEffect(() => {
    // 初始化所有下拉组件
    const dropdownToggles = document.querySelectorAll('.dropdown-toggle')
    dropdownToggles.forEach(el => new Dropdown(el))
  }, [])

  // 你的原有组件逻辑
  return (
    // 你的原有下拉代码
  )
}