web-dev-qa-db-ja.com

reactjs、bootstrapおよびnpm import-jQueryは定義されていません

反応アプリでbootstrapを使用しようとしていますが、aError: 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それを検出/読み取りできるようにする方法はありますか？

bootstrap経由で呼び出します

import bootstrap from 'bootstrap'
javascripttwitter-bootstrapreactjsnpmcreate-react-app
9
A. Lau

_import bootstrap from 'bootstrap'_

const bootstrap = require('bootstrap');

「create-react-app」を使用してプロジェクトをビルドしようとしましたが、インポートされたモジュールのロード順序はインポート順序と同じではないことがわかりました。これが、boostrapがjqueryを見つけられない理由です。通常、この状態では「必須」を使用できます。それは私のPCで動作します。

_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

19
blackmiaool

Webpackを使用していますか？その場合は、webpack.config.js。

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

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を使用することができますbootstrap components 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を使用した基本的な例です。さらに必要な場合は、これについてコメントを書くことができます。

4
Venkatesh Somu

EDIT：あなたの問題は、データテーブルとjqueryの統合に関する問題だと思われるので、質問の再構成を検討する必要があります。

ReactはvirtualDOMを使用し、jQueryは完全にDOMで動作します。

そのため、DataTablesとjQueryでニースをプレイすることはほぼ不可能に近いようです。 DataTablesを表示することもできますが、Reactで何か他の操作を行うと、基本的に独自のvirtualDOMの使用に戻り、DataTablesが混乱します。

いくつかの反応しやすいデータテーブルの代替：

DataTables関連の議論：

1
Syden