reactjs、bootstrap 和 npm import - jQuery 未定义

Question

我正在尝试在我的 React 应用程序中使用 bootstrap，但它给了我 Error: Bootstrap's JavaScript requires jQuery。我已经导入 jquery 并尝试从其他帖子中尝试以下操作：

import $ from 'jquery';
window.jQuery = $;
window.$ = $;
global.jQuery = $;

但是，我仍然遇到 not defined 错误。

解决这个问题的唯一方法是把

  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

进入index.html

是否有导出 jquery 或 bootstrap 能够 detect/read 的方法？

我通过

给我的bootstrap打电话

import bootstrap from 'bootstrap'

Answer 1

你在使用 webpack 吗？如果是这样，请将此添加到您的 webpack.config.js.

plugins: [
  new webpack.ProvidePlugin({
    jQuery: 'jquery',
    $: 'jquery'
  })
],

Answer 2

编辑： 我从您的评论中看到您的问题似乎与 jquery 集成数据表有关，您应该考虑重新制定您的问题。

请记住，React 使用 虚拟 DOM，并且 jQuery 完全在 DOM 中播放。

因此，考虑到这一点，似乎几乎不可能让 DataTables 和 jQuery 在所有方面发挥良好的作用。你可以显示 DataTables，但是当你用 React 做任何其他事情时，它基本上会回到使用它自己的 virtualDOM，这会弄乱 DataTables。

一些反应友好的数据表替代品：

• React data grid
• Integrate DataTables with ReactJS（注意 destroy 选项用于使其工作）
• Facebook FixedDataTable
• NPM react-bootstrap-datatable

DataTables相关讨论：

• DataTable with ReactJS
• Anyone use DataTables with ReactJS?

Answer 3

import bootstrap from 'bootstrap'

const bootstrap = require('bootstrap');

我尝试用"create-react-app"构建一个项目，发现导入模块的加载顺序与导入顺序不一样。而这就是为什么boostrap找不到jquery的原因。通常，您可以在这种情况下使用 "require"。它适用于我的电脑。

import $ from 'jquery';
window.jQuery = $;
window.$ = $;
global.jQuery = $;
const bootstrap = require('bootstrap');
console.log(bootstrap)

相关事物：

imports吊装

imports应该先走

Notably, imports are hoisted, which means the imported modules will be evaluated before any of the statements interspersed between them. Keeping all imports together at the top of the file may prevent surprises resulting from this part of the spec.

来自 https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/first.md

Answer 4

使用 create-react-app 时， 首先你需要像这样安装 Jquery 包。

sudo npm install jquery --save 

并做出这样的反应-bootstrap

 sudo npm install react-bootstrap --save

现在在 JS 文件中，您可以像这样同时使用 jquery 和 bootstrap。

 import $ from 'jquery';
 import { Carousel, Modal,Button, Panel,Image,Row,Col } from 'react-bootstrap';

你可以使用这个 url 来反应 bootstrap 组件 https://react-bootstrap.github.io/components.html

你可以像这样使用带有 onclick 功能的按钮

<Button bsStyle="primary" bsSize="large" active onClick={this.getData()}>Sample onClick</Button>

在

 getData(){
 $.ajax({
   method: 'post',
   url:'http://someurl/getdata',
   data: 'passing data if any',
   success: function(data){
      console.log(data);
      alert(data);
      this.setState({
         some: data.content,
         some2: data.content2,
      });
   },
   error: function(err){
      console.log(err);
   }
 });

所有这些都是使用 jquery 和 bootstrap 的基本示例，如果您需要更多，可以写评论。