React中不依赖第三方库实现Bootstrap下拉组件的问题排查

我尝试在React中不依赖react-bootstrap或reactstrap这类封装库，直接基于Bootstrap原生样式和JS实现Dropdown组件，但组件毫无反应且控制台无报错。我尝试用ref实例化Bootstrap的Dropdown类，但没达到预期效果，代码如下：

import React, { useRef, useEffect } from 'react'
import '@popperjs/core'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.js'

import { Dropdown } from 'bootstrap'

function App() {

  const dropdownRef = useRef<any>(null)

  useEffect(() => {
    if (dropdownRef.current) {
      new Dropdown(dropdownRef.current, {
        autoClose:  'inside'
      })
    }
  }, [dropdownRef.current])

  return (
    <div>
      <div className="dropdown">
        <button 
          className="btn btn-secondary dropdown-toggle"              
          type="button" 
          data-bs-toggle="dropdown" 
          aria-expanded="false"
          ref={dropdownRef}
        >
          Dropdown button
        </button>
        <ul className="dropdown-menu dropdown-menu-dark">
          <li><a className="dropdown-item active" 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>
          <li><hr className="dropdown-divider" /></li>
          <li><a className="dropdown-item" href="#">Separated link</a></li>
        </ul>
      </div>
    </div>
  );
}

问题根源 #

1. 重复加载Bootstrap JS导致冲突：同时导入全局Bootstrap JS文件和ESM方式的单个组件，两种初始化逻辑互相干扰，导致手动实例化的Dropdown无法正常工作。
2. useEffect依赖错误：dropdownRef.current不能作为useEffect的依赖——React不会追踪ref对象的current属性变化，这个依赖不会触发effect执行，可能导致Dropdown未被正确初始化。
3. 冗余属性干扰：data-bs-toggle="dropdown"会触发Bootstrap的自动初始化逻辑，和手动实例化的逻辑冲突，导致组件无法响应点击。

修正后的代码 #

import React, { useRef, useEffect } from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
// 仅保留ESM方式导入Dropdown，移除全局Bootstrap JS导入
import { Dropdown } from 'bootstrap'

function App() {
  const dropdownRef = useRef(null)

  useEffect(() => {
    let dropdownInstance
    if (dropdownRef.current) {
      // 实例化Dropdown组件
      dropdownInstance = new Dropdown(dropdownRef.current, {
        autoClose: 'inside'
      })
    }

    // 组件卸载时销毁实例，避免内存泄漏
    return () => {
      dropdownInstance?.dispose()
    }
  }, []) // 空数组确保仅在组件挂载时执行一次初始化

  return (
    <div>
      <div className="dropdown">
        <button 
          className="btn btn-secondary dropdown-toggle"              
          type="button" 
          aria-expanded="false"
          ref={dropdownRef}
        >
          Dropdown button
        </button>
        <ul className="dropdown-menu dropdown-menu-dark">
          <li><a className="dropdown-item active" 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>
          <li><hr className="dropdown-divider" /></li>
          <li><a className="dropdown-item" href="#">Separated link</a></li>
        </ul>
      </div>
    </div>
  );
}

关键说明 #

• 单一导入方式：选择ESM方式导入单个Bootstrap组件，避免全局导入带来的冲突和冗余。
• 正确的副作用管理：用空数组作为useEffect依赖保证初始化仅执行一次，同时添加清理函数销毁实例，防止内存泄漏。
• 移除自动初始化属性：删除data-bs-toggle="dropdown"，让手动实例化逻辑完全控制Dropdown的行为。

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