import bootstrap from 'bootstrap'

const bootstrap = require('bootstrap');

我尝试使用“create-react-app”构建一个项目，发现导入module的加载顺序与导入顺序不同。这就是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 应该先去

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

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

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

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

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

sudo npm install jquery --save 

和像这样react引导

 sudo npm install react-bootstrap --save

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

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

您可以将此 url 用于react引导程序组件 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 的基本示例，如果您需要更多，您可以对此写评论。

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

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

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

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

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

DataTables 相关讨论：

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