11

我正在尝试在我的反应应用程序中使用引导程序，但它给了我一个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'
4

4 回答 4

23

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

于 2017-03-27T11:52:53.247 回答
5

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

plugins: [
  new webpack.ProvidePlugin({
    jQuery: 'jquery',
    $: 'jquery'
  })
],
于 2017-01-24T00:35:53.317 回答
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 的基本示例，如果您需要更多，您可以对此发表评论。

于 2017-03-27T12:58:42.377 回答
1

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

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

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

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

数据表相关讨论：

于 2017-03-27T00:56:01.137 回答