反应错误：__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

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

Answer 1

导入将在模块内部import $ from 'jquery'创建一个名为局部变量$，然后由$('#addSupModal').modal('show')（而不是所需的全局变量$）使用。

最快的解决方法是$从全局上下文中显式使用jQuery （$.modal()由于您在时在script标记中引用了jQuery ，因此已在您的全局上下文中进行了扩展<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