reactjs、bootstrap 和 npm 导入 - 未定义 jQuery

Question

我正在尝试在我的 react 应用程序中使用引导程序，但它给了我一个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 或让引导程序能够检测/读取它？

我通过调用我的引导程序

import bootstrap from 'bootstrap'

Answer 1

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 被吊起

https://stackoverflow.com/a/29334761/4831179

imports 应该先去

值得注意的是，导入会被提升，这意味着导入的模块将在任何散布在它们之间的语句之前进行评估。将所有导入放在文件顶部可能会防止规范的这一部分导致意外。

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

Answer 2

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

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

Answer 3

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

sudo npm install jquery --save 

像这样反应引导

 sudo npm install react-bootstrap --save

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

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

你可以使用这个 url 来响应引导组件 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 的基本示例，如果您需要更多内容，您可以为此编写 cmets。

Answer 4

编辑：我从您的 cmets 看到您的问题似乎是关于将数据表与 jquery 集成，您应该考虑重新制定您的问题。

请记住，React 使用 虚拟 DOM，而 jQuery 完全在 DOM 中运行。

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

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

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

DataTables 相关讨论：

• DataTable with ReactJS
• Anyone use DataTables with ReactJS?