web-dev-qa-db-fra.com

reactjs, bootstrap et npm import - jQuery n'est pas défini

J'essaie d'utiliser bootstrap dans mon application de réaction, mais cela me donne unError: Bootstrap's JavaScript requires jQuery. J'ai importé jQuery et j'ai essayé plusieurs des articles suivants: 

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

Cependant, je reçois toujours l'erreur not defined.

La seule façon de résoudre ce problème est de mettre

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

dans index.html

existe-t-il un moyen d'exporter jQuery ou si Bootstrap peut le détecter/le lire?

J'appelle mon bootstrap via

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

Lorsque vous utilisez create-react-app, Vous devez d'abord installer le paquet Jquery de la manière suivante.

Sudo npm install jquery --save

et réagit-bootstrap comme ça 

 Sudo npm install react-bootstrap --save

Maintenant, dans les fichiers JS, vous pouvez utiliser à la fois jquery et bootstrap comme ceci.

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

vous pouvez utiliser cette URL pour faire réagir les composants bootstrap https://react-bootstrap.github.io/components.html

vous pouvez utiliser des boutons avec la fonction onclick comme ceci

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

dans le 

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

tout ceci est un exemple basique utilisant jquery et bootstrap si vous avez besoin de plus, vous pouvez écrire vos commentaires à ce sujet.

4
Venkatesh Somu

Utilisez-vous webpack? Si oui, ajoutez ceci sur votre webpack.config.js.

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

EDIT: Je vois dans vos commentaires que votre problème semble concerner l’intégration de datatables avec jquery. Vous devriez envisager de reformuler votre question.

N'oubliez pas que React utilise un virtuel DOM, et que jQuery est entièrement lu dans le DOM.

Donc, compte tenu de cela, il semble presque impossible que DataTables & jQuery joue à Nice tout autour. Vous pouvez afficher les DataTables, mais lorsque vous faites autre chose avec React, il revient essentiellement à utiliser son propre virtuel DOM, ce qui gâcherait les DataTables.

Certains réagissent à des solutions de remplacement conviviales pour les datatables:

Discussions relatives aux DataTables:

1
Syden