我正在用Bootstrap 4做一个react项目。引导程序已通过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()对其进行了扩展，因为在执行时，您在脚本标记中引用了它）：
window.$('#addSupModal').modal('show')
不过，最好完全不包含jQuery和带有脚本标记的插件，因为这样就会创建隐式依赖项（也就是说，没有这些script标记，模块就无法运行）。取而代之的是导入引导程序：
import $ from 'jquery'; // <-to import jquery
import 'bootstrap';
$('#addSupModal').modal('show'); // <- to show modal
