React中使用Bootstrap 5 Modal报错：Cannot read properties of undefined (reading 'backdrop')

错误原因分析 #

这个报错是由于Bootstrap自动初始化与手动调用模态框实例冲突，或依赖缺失导致的：

1. 触发按钮同时带有data-bs-toggle="modal"属性和自定义onClick事件，Bootstrap会自动尝试初始化模态框，和你手动调用getOrCreateInstance重复创建实例，导致内部配置对象未正确初始化。
2. 未正确导入Bootstrap依赖（如Popper.js），模态框的backdrop模块依赖Popper完成定位，缺失时会出现属性未定义错误。

具体修复方案 #

方案1：移除冲突的自动初始化属性 #

直接删除触发按钮上的data-bs-toggle="modal"，避免Bootstrap自动初始化模态框：

// 父组件中修改按钮代码
<a
  className="btn btn-primary"
  onClick={handleClick}
  role="button"
>
  Open first modal
</a>

方案2：确保Bootstrap和依赖正确导入 #

Bootstrap 5必须依赖Popper.js，先安装依赖：

npm install bootstrap @popperjs/core

在项目入口文件（如index.js）中导入完整的Bootstrap bundle（已包含Popper）：

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

注意：不要单独导入{ Modal } from 'bootstrap'，而是通过bundle让Bootstrap挂载到全局window.bootstrap对象上，避免模块导入的上下文问题。

方案3：用React的useRef替代原生DOM查询（推荐） #

符合React的DOM操作规范，避免getElementById可能出现的DOM未挂载问题：

父组件修改：

import { useRef } from 'react';
import EditModal from '../../components/editModal/EditModal';

const Home = () => {
  const modalRef = useRef(null);

  const handleClick = (e) => {
    e.preventDefault();
    const modal = window.bootstrap.Modal.getOrCreateInstance(modalRef.current);
    modal.show();
  };

  return (
    <>
      <a
        className="btn btn-primary"
        onClick={handleClick}
        role="button"
      >
        Open first modal
      </a>
      <div className="container">
        <div className="row mt-5">
          <div className="col-md-3"></div>
        </div>
      </div>
      <EditModal modalRef={modalRef} />
    </>
  );
};

模态框组件修改：

const EditModal = ({ modalRef }) => {
  return (
    <>
      <div
        ref={modalRef}
        className="modal fade "
        id="editUserModal"
        aria-hidden="true"
        tabIndex="-1"
      >
        {/* 原有模态框内容保持不变 */}
        <div className="modal-dialog modal-dialog-centered">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title" id="exampleModalToggleLabel">
                Modal 1
              </h5>
              <button
                type="button"
                className="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
            </div>
            <div className="modal-body">
              Show a second modal and hide this one with the button below.
            </div>
            <div className="modal-footer">
              <button
                className="btn btn-primary"
                data-bs-target="#exampleModalToggle2"
                data-bs-toggle="modal"
                data-bs-dismiss="modal"
              >
                Open second modal
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};
export default EditModal;

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