跳至主要内容

如何在 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');

測試可行,問題解決