我正试图创建和编辑函数，以使用引导模式按用户更新笔记(在REACT项目中(，但以下是我获得的错误
Uncaught (in promise) TypeError: jquery__WEBPACK_IMPORTED_MODULE_1___default()(...).modal is not a function
updateNote Notes.js:16
onClick NoteItem.js:15
React 23
js index.js:6
factory react refresh:6
Webpack 3
__webpack_require__
<anonymous>
<anonymous>
我试着浏览论坛上的一些帖子，比如在引导之前包含jquery库，但没有成功。
这是我的代码：
import React,{ useContext,useEffect,useRef } from "react";
import $ from 'jquery'
import 'bootstrap';
import noteContext from "../context/notes/NoteContext"
import AddNote from "./AddNote";
import NoteItem from "./NoteItem";
export const Notes=() => {
const context=useContext(noteContext)
const { notes,getNotes }=context
useEffect(() => {
getNotes()
// eslint-disable-next-line
},[])
const ref=useRef(null)
const updateNote=async (note) => {
console.log("working")
$(ref).modal('toggle')
}
return (
<>
<AddNote />
<button ref={ref} type="button" className="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div className="modal fade" id="exampleModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">Edit Note</h5>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">
...
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" className="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div className="row my-3">
<h1>Your Notes</h1>
{notes.map((note) => {
return <NoteItem key={note._id} updateNote={updateNote} note={note} />
})}
</div>
</>
)
}
这里还有我的index.html(我删除了jquery链接，因为它不起作用(：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>iNotebook - Your notes on the cloud</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<script src="https://kit.fontawesome.com/ae578fcfec.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
</div>
</body>
</html>
我错过了什么？
我发现另一篇帖子也有类似的问题(React Error:__WEBPACK_IMPORTED_MODULE_4_jquery___default(…((…(。modal不是函数(导入引导程序也不起作用，因为它与我安装的@popuperjs/core存在依赖性问题，但随后出现了更多错误：
Module not found: Error: Can't resolve './modifiers/index.js' in '/home/alien/codes/webDev/react/inotebook/node_modules/@popperjs/core/lib'
[0] ERROR in ./node_modules/@popperjs/core/lib/index.js 2:0-37
[0] Module not found: Error: Can't resolve './modifiers/index.js' in '/home/alien/codes/webDev/react/inotebook/node_modules/@popperjs/core/lib'
[0]
[0] ERROR in ./node_modules/@popperjs/core/lib/popper.js 20:0-37
[0] Module not found: Error: Can't resolve './modifiers/index.js' in '/home/alien/codes/webDev/react/inotebook/node_modules/@popperjs/core/lib'
[0]
[0] webpack compiled with 2 errors
然后我没有找到任何解决方法，让我知道这个方法是否相关，或者我是否需要添加其他内容到这个中
为了给出一个更好的想法，这里是我下面的教程：https://youtu.be/J5hGX5_XZDk。它已经很旧了，所以在新版本中一定有语法更新，我不确定，所以如果有什么需要更改，请告诉我。在你问之前，最初我逐字逐句地遵循了本教程，但后来我不得不查看官方的引导文档，以删除一些导致应用程序崩溃的错误，所以我还需要更改其他内容吗？
更新代码：
import React,{ useContext,useEffect,useRef } from "react";
import noteContext from "../context/notes/NoteContext"
import AddNote from "./AddNote";
import NoteItem from "./NoteItem";
export const Notes=() => {
const context=useContext(noteContext)
const { notes,getNotes }=context
useEffect(() => {
getNotes()
// eslint-disable-next-line
},[])
const ref=useRef(null)
const updateNote=async (note) => {
console.log("working")
ref.current.click()
}
return (
<>
<AddNote />
<button ref={ref} type="button" className="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div className="modal fade" id="exampleModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">Edit Note</h5>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">
...
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" className="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div className="row my-3">
<h1>Your Notes</h1>
{notes.map((note) => {
return <NoteItem key={note._id} updateNote={updateNote} note={note} />
})}
</div>
</>
)
}
Bootstrap V5有许多中断更改。其中之一是删除了jquery。
这就是bootstrap 5使用javascript切换模式的方式。
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
});
myModal.toggle();
您还可以使用数据属性显示/隐藏模态。但它与Bootsrap 4中所做的不同。他们已经将属性命名为data-bs-*(来自data-*(
请查看此处的文档：https://getbootstrap.com/docs/5.0/components/modal/#live-演示
您的代码使用数据切换＝"；模态"；数据目标＝"#exampleModal">但是该示例示出了CCD_ 3。
同时data-dismissdata-bs-dismiss