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'在模块内部创建一个名为$的 local 变量，然后被$('#addSupModal').modal('show')（而不是全局{{1} }）。

最快的解决方法是从全局上下文中显式使用jQuery $（已通过$进行了扩展，因为在执行$.modal()时已在脚本标签中引用了它））：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

最好完全不包括带有脚本标签的jQuery和插件，因为那样就可以创建隐式依赖项（也就是说，如果没有这些{{1} }标签）。相反，也要导入Bootstrap：

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

反应错误：__WEBPACK_IMPORTED_MODULE_4_jquery ___ default（...）（...）。modal不是函数

1 个答案: