在React中无第三方库调用Bootstrap .modal()报错：‘is not a function’

我刚踩过这个坑！Bootstrap 4的Modal组件必须依赖jQuery和Popper.js才能正常工作，而create-react-app默认不会帮你全局引入这些依赖，直接调用modal()方法自然会报错。下面是不修改webpack配置的前提下，完整的解决步骤：

1. 安装必要依赖 #

首先确认你的项目里已经安装了jQuery和Popper.js（Bootstrap 4需要的是popper.js，不是新版的@popperjs/core），如果没有的话，执行以下命令：

npm install jquery popper.js --save

2. 全局导入并挂载依赖到window对象 #

Bootstrap的JS插件会在全局环境中查找jQuery、$和Popper变量，所以我们需要在项目入口文件src/index.js中导入这些库，并挂载到window上：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// 先导入Bootstrap的CSS，确保Modal样式正常
import 'bootstrap/dist/css/bootstrap.min.css';

// 导入jQuery和Popper.js
import $ from 'jquery';
import Popper from 'popper.js';

// 挂载到window，让Bootstrap能找到它们
window.$ = $;
window.jQuery = $;
window.Popper = Popper;

// 导入Bootstrap的JS bundle（这个文件已经包含了Popper，也可以单独导入bootstrap/dist/js/bootstrap）
import 'bootstrap/dist/js/bootstrap.bundle.min';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

3. 在React组件中控制Modal #

在组件里，我们用React的useRef来获取Modal的DOM元素，然后用jQuery调用.modal()方法来控制显示/隐藏，这样比直接用document.getElementById更符合React的组件生命周期：

import React, { useEffect, useRef } from 'react';

function CustomModal() {
  // 用useRef获取Modal的DOM节点
  const modalRef = useRef(null);

  // 打开Modal的方法
  const openModal = () => {
    $(modalRef.current).modal('show');
  };

  // 关闭Modal的方法
  const closeModal = () => {
    $(modalRef.current).modal('hide');
  };

  // 监听Modal的关闭事件（可选）
  useEffect(() => {
    const modalElement = modalRef.current;
    // 绑定Modal隐藏后的事件
    $(modalElement).on('hidden.bs.modal', () => {
      console.log('Modal已经关闭啦');
    });

    // 组件卸载时清理事件监听，防止内存泄漏
    return () => {
      $(modalElement).off('hidden.bs.modal');
    };
  }, []);

  return (
    <>
      {/* 触发按钮 */}
      <button onClick={openModal} className="btn btn-primary mt-3">
        打开Bootstrap Modal
      </button>

      {/* Bootstrap Modal结构 */}
      <div className="modal fade" ref={modalRef} tabIndex="-1" role="dialog">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title">自定义Modal</h5>
              <button
                type="button"
                className="close"
                onClick={closeModal}
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div className="modal-body">
              <p>这是用JavaScript控制的Bootstrap Modal，没有用react-bootstrap！</p>
            </div>
            <div className="modal-footer">
              <button
                type="button"
                className="btn btn-secondary"
                onClick={closeModal}
              >
                关闭
              </button>
              <button type="button" className="btn btn-primary">
                保存更改
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default CustomModal;

常见坑点要注意 #

• 不要直接用原生DOM元素调用.modal()：document.getElementById('myModal').modal('show')会报错，因为.modal()是jQuery的插件方法，必须用jQuery包装DOM元素后调用：$(document.getElementById('myModal')).modal('show')
• 导入顺序不能乱：必须先导入jQuery和Popper，再导入Bootstrap的JS，否则Bootstrap无法找到依赖
• 别忘了导入Bootstrap CSS：如果只导入JS不导入CSS，Modal会没有样式，看起来像是没显示

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