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

Question

我正在使用 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 但它不起作用。有什么建议吗？

Answer 1

您的导入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