web-dev-qa-db-fra.com

Comment utiliser JQuery sur ReactJS

Je suis novice avec ReactJS. Jusqu'à présent, j'utilise JQuery pour définir une animation ou une fonctionnalité dont j'avais besoin. Mais maintenant, j'essaie d'utiliser ReactJS et de minimiser l'utilisation de JQuery.

Mon cas est:
J'essaie de construire son propre accordéon , avec JQuery, je peux le faire, mais avec ReactJS, je ne comprends pas comment.

<div class="accor">
   <div class="head">Head 1</div>
   <div class="body hide">Body 1</div>
</div>
<div class="accor">
   <div class="head">Head 1</div>
   <div class="body hide">Body 1</div>
</div>
<div class="accor">
   <div class="head">Head 1</div>
   <div class="body hide">Body 1</div>
</div>

en utilisant JQuery:

$('.accor > .head').on('click', function(){
   $('.accor > .body').slideUp();
   $(this).next().slideDown();
});

Ma question:
1. Comment faire cela dans ReactJS?


Merci avant

javascriptjqueryreactjs
16
ND.Santos

Vous devriez essayer d'éviter jQuery dans ReactJS. Mais si vous voulez vraiment l'utiliser, vous devez le mettre dans la fonction de cycle de vie composantDidMount () du composant.

par exemple.

class App extends React.Component {
  componentDidMount() {
    // Jquery here $(...)...
  }

  // ...
}

Idéalement, vous voudriez créer un composant Accordion réutilisable. Pour cela, vous pouvez utiliser Jquery ou simplement utiliser javascript + CSS.

class Accordion extends React.Component {
  constructor() {
    super();
    this._handleClick = this._handleClick.bind(this);
  }

  componentDidMount() {
    this._handleClick();
  }

  _handleClick() {
    const acc = this._acc.children;
    for (let i = 0; i < acc.length; i++) {
      let a = acc[i];
      a.onclick = () => a.classList.toggle("active");
    }
  }

  render() {
    return (
      <div 
        ref={a => this._acc = a} 
        onClick={this._handleClick}>
        {this.props.children}
      </div>
    )
  }
}

Ensuite, vous pouvez l’utiliser dans n’importe quel composant, comme ceci:

class App extends React.Component {
  render() {
    return (
      <div>
        <Accordion>
          <div className="accor">
            <div className="head">Head 1</div>
            <div className="body"></div>
          </div>
        </Accordion>
      </div>
    );
  }
}

Lien vers le codepen ici: https://codepen.io/jzmmm/pen/JKLwEA?editors=0110

21
jzm

Oui, nous pouvons utiliser jQuery dans ReactJs. Ici, je vais vous dire comment nous pouvons l’utiliser avec npm.

étape 1: Allez dans le dossier de votre projet où le fichier package.json est présent via terminal en utilisant la commande cd.

étape 2: Ecrivez la commande suivante pour installer jquery à l'aide de npm: npm install jquery --save

étape 3: Maintenant, importez $ de jquery dans votre fichier jsx où vous devez utiliser. 

Exemple: 

écrivez ci-dessous dans index.jsx 

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';


//   react code here


$("button").click(function(){
    $.get("demo_test.asp", function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
});

// react code here

écrivez ci-dessous dans index.html 

<!DOCTYPE html>
<html>
<head>
    <script src="index.jsx"></script>
    <!-- other scripting files -->
</head>
<body>
    <!-- other useful tags -->
    <div id="div1">
        <h2>Let jQuery AJAX Change This Text</h2>
    </div>
    <button>Get External Content</button>
</body>
</html>
55
solanki...

Étape 1: 

npm install jquery

Étape 2: 

touch loader.js

Quelque part dans votre dossier de projet

Étape 3: 

//loader.js
window.$ = window.jQuery = require('jquery')

Étape 4:

Importez le chargeur dans votre fichier racine avant d'importer les fichiers nécessitant jQuery

//App.js
import '<pathToYourLoader>/loader.js'

Étape 5:

Maintenant, utilisez jQuery n'importe où dans votre code:

//SomeReact.js
class SomeClass extends React.Compontent {

...

handleClick = () => {
   $('.accor > .head').on('click', function(){
      $('.accor > .body').slideUp();
      $(this).next().slideDown();
   });
}

...

export default SomeClass
3
David Joos

Un peu plus tôt, j'avais du mal à utiliser jquery avec React js, alors j'ai suivi les étapes pour que cela fonctionne-

  1. npm install jquery --save

  2. Alors, import $ from "jquery";

    Vois ici

0
hardik chugh