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

reactjs, bootstrap and npm import - jQuery is not defined

提问by A. L

I'm trying to use bootstrap in my react app, but it gives me aError: Bootstrap's JavaScript requires jQuery. I have imported jquery and have tried tried the following from other posts:

我正在尝试在我的 React 应用程序中使用引导程序，但它给了我一个Error: Bootstrap's JavaScript requires jQuery. 我已经导入了 jquery 并尝试了其他帖子中的以下内容：

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

However, I still get the not definederror.

但是，我仍然收到not defined错误消息。

The only way to fix this is to put

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

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

into index.html

进入 index.html

is there a way to export jquery or have bootstrap be able to detect/read it?

有没有办法导出 jquery 或让引导程序能够检测/读取它？

I call my bootstrap via

我通过以下方式调用我的引导程序

import bootstrap from 'bootstrap'

回答by blackmiaool

import bootstrap from 'bootstrap'

import bootstrap from 'bootstrap'

const bootstrap = require('bootstrap');

const bootstrap = require('bootstrap');

I tried to build a project with "create-react-app" and found that the loading order of imported modules is not same with importing order. And this is the reason why boostrap can't find jquery. Generally, you can use "require" in this condition. It works on my pc.

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

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

Relevant things:

相关事项：

importsare hoisted

imports被吊起来

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

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

importsshould go first

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.

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

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

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

回答by tkhm

Are you using webpack? If so, add this on your webpack.config.js.

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

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

回答by Venkatesh Somu

When using create-react-app, First You need to install the Jquery package like this.

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

sudo npm install jquery --save 

and react-bootstrap like this

像这样反应引导

 sudo npm install react-bootstrap --save

Now in the JS files you can use both jquery and bootstrap like this.

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

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

you can use this url for react bootstrap components https://react-bootstrap.github.io/components.html

您可以将此 url 用于反应引导程序组件 https://react-bootstrap.github.io/components.html

you can use Buttons with onclick function like this

您可以像这样使用具有 onclick 功能的按钮

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

in the

在里面

 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);
   }
 });

all of this is basic example using jquery and bootstrap if you need more you can write comments about this.

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

回答by Syden

EDIT:I see from your comments your issue seems to be on integrating datatables with jquery, you should consider re-formulating your question.

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

Bear in mind React uses a virtualDOM, and jQuery plays entirely in the DOM.

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

So considering that, it seems near impossible to get DataTables & jQuery to play nice all around. You could get DataTables displayed, but when you do anything else with React, it basically goes back to using its own virtualDOM, which would mess with the DataTables.

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

Some react friendly datatables alternatives:

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

• React data grid
• Integrate DataTables with ReactJS(note destroyoption is used to get it to work)
• Facebook FixedDataTable
• NPM react-bootstrap-datatable

• 反应数据网格
• 将 DataTables 与 ReactJS 集成（注意destroy选项用于使其工作）
• Facebook 固定数据表
• NPM 反应引导数据表

DataTables related discussions:

DataTables 相关讨论：

• DataTable with ReactJS
• Anyone use DataTables with ReactJS?

• 带有 ReactJS 的数据表
• 有人在 ReactJS 中使用 DataTables 吗？