gpt4 book ai didi

jquery - react 错误 : __WEBPACK_IMPORTED_MODULE_4_jquery___default(. ..)(...).modal 不是函数

转载 作者:行者123 更新时间:2023-12-03 13:57:07 25 4
gpt4 key购买 nike

我正在使用 Bootstrap 4 开发一个 React 项目。Bootstrap 已通过 CDN 导入。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

我想要的是在满足条件时显示/隐藏模式。我已经使用

导入了 jquery
npm install jquery --save

在组件中

import $ from 'jquery'; <-to import jquery

$('#addSupModal').modal('show'); <- to show modal

但是在执行上述行时,它会显示类似的错误

Unhandled Rejection (TypeError): __WEBPACK_IMPORTED_MODULE_4_jquery___default(...)(...).modal is not a function

我读到了这个错误,它说可能是因为 jquery 通过 CDN 和 npm 导入了两次。我不确定原因是什么。但我也尝试仅从一种方法导入 jquery 但它不起作用。有什么建议吗?

最佳答案

您的导入import $ from 'jquery'创建一个名为 $本地变量在你的模块中,然后由 $('#addSupModal').modal('show') 使用(而不是您想要的全局 $)。

最快的解决方法是显式使用 jQuery $来自全局上下文(已使用 $.modal() 进行扩展,因为您在执行 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> 时在脚本标记中引用了该上下文):

window.$('#addSupModal').modal('show')

最好不要包含带有脚本标签的 jQuery 和插件,因为这样你就创建了隐式依赖项(也就是说,如果没有这些 script 标签,你的模块就无法运行)。相反,也导入 Bootstrap:

import $ from 'jquery'; // <-to import jquery
import 'bootstrap';

$('#addSupModal').modal('show'); // <- to show modal

关于jquery - react 错误 : __WEBPACK_IMPORTED_MODULE_4_jquery___default(. ..)(...).modal 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52464915/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com