Question

错误：Bootstrap的JavaScript需要jQuery 此屏幕仅在开发中可见。如果应用程序在生产中崩溃，则不会显示。打开浏览器的开发者控制台以进一步检查此错误。

import React, { Component } from 'react';
import {Link } from 'react-router-dom';
import $ from 'jquery';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';

import 'bootstrap/dist/js/bootstrap.js';时然后错误消息`

错误：Bootstrap的JavaScript需要jQuery 此屏幕仅在开发中可见。如果应用程序在生产中崩溃，则不会显示。打开浏览器的开发者控制台以进一步检查此错误。

Answer 1

当我想使用实际的引导程序时，将CDN添加到index.html中，如下所示

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

使用npm我引导程序下载所需的文件。
然后在您的项目中将引导程序用作html
但是如果您愿意，可以使用react-strap或react-bootstrap进行更好的javascript操作

Answer 2

Bootstrap要求jquery在全局对象上可用。请尝试以下-

import 'bootstrap/dist/css/bootstrap.min.css';

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

已针对bootstrap@3.3.7和jquery@2.2.4进行了验证。

Ref-issue

错误：Bootstrap的JavaScript需要ReacJS中的jQuery

2 个答案: