反应错误:__WEBPACK_IMPORTED_MODULE_4_jquery ___ default(...)(...).modal不是函数 [英] React Error : __WEBPACK_IMPORTED_MODULE_4_jquery___default(...)(...).modal is not a function

问题描述

我正在使用Bootstrap 4进行​​React项目.Bootstrap已通过CDN导入.

I'm working on a react project with Bootstrap 4. Bootstrap has been imported through 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>

我想要的是在满足条件的情况下显示/隐藏模式.我已经使用

what I wanted is to show/hide a modal if a condition is satisfied. I have already imported jquery also using

npm install jquery --save

在组件中

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

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

但是在执行上述行的过程中，它显示类似

but during the execution time when the above line gets executed, it shows an error like

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

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

I read about this error and it says maybe because jquery is imported twice with CDN and npm. I don't know for sure what the reason. But I also tried importing jquery from only one method but it doesn't work. Any suggestions?

推荐答案

您的导入import $ from 'jquery'在模块内部创建一个名为$的 local 变量，然后由$('#addSupModal').modal('show')使用(而不是您想要的全局$.

Your import import $ from 'jquery' creates a local variable named $ inside your module, which then gets used by $('#addSupModal').modal('show') (instead of the global $ you wanted).

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

The quickest fix would be to explicitly use the jQuery $ from the global context (which has been extended with your $.modal() because you referenced that in your script tag when you did <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>):

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

最好完全不包括带有脚本标签的jQuery和插件，因为那样就可以创建隐式依赖项(也就是说，没有这些script标签就无法运行模块) ).相反，也要导入Bootstrap:

It would be better though to not include the jQuery and plugins with script tags at all, because that way you are creating implicit dependencies (which is, your module cannot run without those script tags). Instead, import Bootstrap as well:

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

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

这篇关于反应错误:__WEBPACK_IMPORTED_MODULE_4_jquery ___ default(...)(...).modal不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！