web-dev-qa-db-ger.com

reactjs, bootstrap und npm import - jQuery ist nicht definiert

Ich versuche, Bootstrap in meiner Reakt-App zu verwenden, aber es gibt mir einen Error: Bootstrap's JavaScript requires jQuery. Ich habe Jquery importiert und habe folgendes aus anderen Beiträgen versucht: 

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

Ich erhalte jedoch immer noch den not defined-Fehler.

Die einzige Möglichkeit, dies zu beheben, ist zu setzen

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

in index.html

gibt es eine Möglichkeit, Jquery zu exportieren oder muss Bootstrap es erkennen/lesen können?

Ich rufe meine Bootstrap über

import bootstrap from 'bootstrap'
7
A. Lau

import bootstrap from 'bootstrap'

const bootstrap = require('bootstrap');

Ich habe versucht, ein Projekt mit "create-react-app" zu erstellen und festgestellt, dass die Ladereihenfolge der importierten Module nicht mit der Importreihenfolge übereinstimmt. Und das ist der Grund, warum Boostrap keine Anfrage findet. Im Allgemeinen können Sie in diesem Zustand "require" verwenden. Es funktioniert auf meinem PC.

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

Relevante Dinge:

imports werden gehisst

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

imports sollte zuerst gehen

Insbesondere werden Importe gehisst, was bedeutet, dass die importierten Module ausgewertet werden, bevor eine der Anweisungen dazwischen eingefügt wird. Wenn Sie alle Importe oben in der Datei zusammenfassen, können Überraschungen aufgrund dieses Teils der Spezifikation vermieden werden.

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

19
blackmiaool

Wenn Sie create -react-app verwenden, Zuerst müssen Sie das Jquery-Paket wie folgt installieren.

Sudo npm install jquery --save 

und reagiere bootstrap so 

 Sudo npm install react-bootstrap --save

In den JS-Dateien können Sie jetzt sowohl Jquery als auch Bootstrap verwenden.

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

sie können diese URL für reagierte Bootstrap-Komponenten verwenden https://react-bootstrap.github.io/components.html

sie können Buttons mit der Onclick-Funktion wie folgt verwenden

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

in dem 

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

dies alles ist ein einfaches Beispiel für die Verwendung von Jquery und Bootstrap. Wenn Sie mehr benötigen, können Sie dazu Kommentare schreiben.

4
Venkatesh Somu

Verwenden Sie Webpack? Wenn ja, fügen Sie dies Ihrem webpack.config.js hinzu.

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

EDIT: Ich sehe aus Ihren Kommentaren heraus, dass Ihr Problem bei der Integration von Datentabellen in Jquery zu liegen scheint. Sie sollten Ihre Frage neu formulieren.

Denken Sie daran, dass React ein virtuelles DOM verwendet und jQuery vollständig im DOM abgespielt wird.

In Anbetracht dessen scheint es fast unmöglich zu sein, DataTables & jQuery dazu zu bringen, Nice rundum zu spielen. Sie könnten zwar DataTables anzeigen, aber wenn Sie etwas anderes mit React tun, wird im Grunde das eigene virtuelle DOM verwendet, das mit den DataTables verwirrt.

Einige reaktionsfreundlichen Datatables-Alternativen:

DataTables-bezogene Diskussionen:

1
Syden