React项目中Bootstrap Modal报错：$(...).modal is not a function

问题根源 #

你遇到的核心问题是Bootstrap版本差异：旧教程依赖的是Bootstrap 4及更早版本（需要jQuery+Popper.js），但你当前大概率使用的是Bootstrap 5+（已移除jQuery依赖，改用原生JS实现组件），版本不匹配导致了一系列错误。

推荐解决方案：改用React Bootstrap组件库（React项目最优选择） #

直接使用官方封装的React Bootstrap组件，完全脱离jQuery，避免DOM操作与React状态冲突：

1. 清理冗余依赖

   npm uninstall jquery @popperjs/core
   

2. 安装React Bootstrap及Bootstrap核心

   npm install react-bootstrap bootstrap
   

3. 引入Bootstrap样式
   在src/index.js中添加：

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

4. 使用React Bootstrap Modal组件实现编辑功能
   示例代码：

   import { useState } from 'react';
   import { Modal, Button, Form } from 'react-bootstrap';
   
   function NoteEditor({ initialNote }) {
     const [showModal, setShowModal] = useState(false);
     const [editNote, setEditNote] = useState(initialNote);
   
     const handleSave = () => {
       // 这里写你的保存逻辑，比如调用API更新笔记
       console.log("保存的笔记内容：", editNote);
       setShowModal(false);
     };
   
     return (
       <>
         <Button variant="primary" onClick={() => setShowModal(true)}>
           编辑笔记
         </Button>
   
         <Modal show={showModal} onHide={() => setShowModal(false)}>
           <Modal.Header closeButton>
             <Modal.Title>编辑笔记</Modal.Title>
           </Modal.Header>
           <Modal.Body>
             <Form>
               <Form.Group className="mb-3">
                 <Form.Label>标题</Form.Label>
                 <Form.Control 
                   type="text" 
                   value={editNote.title}
                   onChange={(e) => setEditNote({...editNote, title: e.target.value})}
                 />
               </Form.Group>
               <Form.Group className="mb-3">
                 <Form.Label>内容</Form.Label>
                 <Form.Control 
                   as="textarea" 
                   rows={3} 
                   value={editNote.content}
                   onChange={(e) => setEditNote({...editNote, content: e.target.value})}
                 />
               </Form.Group>
             </Form>
           </Modal.Body>
           <Modal.Footer>
             <Button variant="secondary" onClick={() => setShowModal(false)}>
               取消
             </Button>
             <Button variant="primary" onClick={handleSave}>
               保存修改
             </Button>
           </Modal.Footer>
         </Modal>
       </>
     );
   }
   
   export default NoteEditor;
   

备选方案：强制使用Bootstrap 4.x（不推荐） #

如果非要沿用旧教程的jQuery方式，需严格匹配版本：

1. 安装对应版本依赖

   npm install jquery@3.6.0 popper.js@1.16.1 bootstrap@4.6.0
   

2. 按顺序引入依赖
   在src/index.js中添加：

   import $ from 'jquery';
   import Popper from 'popper.js';
   import 'bootstrap/dist/js/bootstrap.bundle.min';
   

3. 确保DOM挂载后调用modal
   用useEffect和useRef避免React生命周期冲突：

   import { useEffect, useRef } from 'react';
   
   function EditNoteModal() {
     const modalRef = useRef(null);
   
     useEffect(() => {
       if (modalRef.current) {
         $(modalRef.current).modal('show');
       }
     }, []);
   
     return (
       <div className="modal fade" ref={modalRef} tabIndex="-1">
         <div className="modal-dialog">
           <div className="modal-content">
             <div className="modal-header">
               <h5 className="modal-title">编辑笔记</h5>
               <button type="button" className="close" data-dismiss="modal">
                 <span>&times;</span>
               </button>
             </div>
             <div className="modal-body">
               {/* 笔记编辑表单 */}
             </div>
           </div>
         </div>
       </div>
     );
   }
   

额外注意事项 #

1. 检查index.html中是否有重复引入的jQuery/Bootstrap CDN，如有请删除，避免与npm安装的依赖冲突。
2. 若使用Bootstrap 5+原生JS，需确保@popperjs/core版本兼容（如Bootstrap 5.2.x对应@popperjs/core@2.11.x），安装命令：

   npm install @popperjs/core@2.11.6 bootstrap@5.2.3
   

   并在index.js中引入：

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

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