跳到主要内容

如何在 React 中使用 bootstrap 3 JS 和 jQuery

· 2 分钟阅读
Eric Cheng

最近在替一个老旧的专案 UI 改版,原专案的 Dashboard 是前同事用手刻出来的,不意外的工程师的美感,现在的角度来看有多丑就有多丑。该专案用的 bootstrap 3,看起来最适合的是直接套用 AdminLTE 2

如何在 React 中使用 jQuery

正常写 React 是不需要用到过时的 jQuery的,但 bootstrap JS 在 4 之前需要绑定 jQuery,而不幸 AdminLTE 会用到,如何在 React 中使用 jQuery,google 可以找到很多解答,大致上就是先 npm install bootstrap 和 jQuery,然后在程式中 import 如下

import 'jquery/dist/jquery.min.js'
import 'bootstrap/dist/js/bootstrap.min.js'

测试在 bootstrap 4 可行,但在 bootstrap 3 就会出现以下错误,明明有 import jQuery 但却读不到

Uncaught Error: Bootstrap's JavaScript requires jQuery at ./node_modules/bootstrap/dist/js/bootstrap.min.js

如何在 React 中使用 bootstrap 3 JS 和 jQuery

卡关有点久,后来查到解法如下,做了一下笔记

const $ = require('jquery/dist/jquery.min.js');
window.$ = $;
window.jQuery = $;
require('bootstrap/dist/js/bootstrap.min.js');

测试可行,问题解决

版权声明


這是 google 廣告