Cómo usar JQuery con ReactJS

84

Soy nuevo en ReactJS. Anteriormente, usé jQuery para configurar cualquier animación o función que necesitaba. Pero ahora estoy tratando de usar ReactJS y minimizar el uso de jQuery.

Mi caso es:

Estoy tratando de construir un acordeón con ReactJS.

<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>

usando JQuery :

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

Mi pregunta:

¿Cómo puedo hacer esto con ReactJS?

javascript jquery reactjs

— ND.Santos
fuente

¿Puede consultar este enlace? Puede ayudarlo a discutir.reactjs.org/t/jquery-with-react/683

— Codebrekers

Encontré un tutorial útil aquí en este video - youtu.be/AMMetkCvztg

— Prem

4

Por favor, trate de no usar jQueryel interior react...

— quirimmo

1

Consulte reactjs.org/docs/integrating-with-other-libraries.html con una explicación de por qué no se recomienda utilizar jQuery dentro de react. De stackoverflow.com/a/46946447/52277

— Michael Freidgeim

esto es shatnez! evítelo: D en.wikipedia.org/wiki/Shatnez

— Joey Baruch

69

Debería intentar evitar jQuery en ReactJS. Pero si realmente quiere usarlo, lo pondría en la función de ciclo de vida componentDidMount () del componente.

p.ej

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

  // ...
}

Idealmente, querrá crear un componente de acordeón reutilizable. Para esto, puede usar Jquery, o simplemente usar javascript + CSS simple.

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

Entonces puedes usarlo en cualquier componente así:

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

Enlace de Codepen aquí: https://codepen.io/jzmmm/pen/JKLwEA?editors=0110 (Cambié este enlace a https ^)

— mnsr
fuente

Thx jzm .. Pero todavía necesito información sobre su código. No entiendo muy bien lo que significa. ¿Puede explicarnos acerca de esto: 1. ref = {a => this._acc = a} 2. deje 3. this._acc.children Gracias 4 su ayuda :)

— ND.Santos

1

@ ND.Santos Lea esta página: facebook.github.io/react/docs/more-about-refs.html esa es la sintaxis de referencia de devolución de llamada. Entonces, en lugar de ref = "accordion" o lo que sea, usa lo que yo uso y devuelve el nodo. string ref se considera heredado. this._acc = llamando al nodo ref (es decir, creas una especie de variable que hace referencia al nodo, para que puedas llamarlo como quieras). 'niños' son los elementos secundarios que se encuentran dentro <Accordion>. En mi enlace de codepen, puede agregar console.log(this._acc)para ver qué es realmente.

— mnsr

Nice @mnsr ¿Puede explicar la razón para usar el método componentDidMount () allí?

— Eddie Lam

152

Sí, podemos usar jQuery en ReactJs. Aquí te diré cómo podemos usarlo usando npm.

Paso 1: Vaya a la carpeta de su proyecto donde el package.jsonarchivo está presente a través del terminal usando el comando cd.

paso 2: escriba el siguiente comando para instalar jquery usando npm:npm install jquery --save

paso 3: Ahora, importe $desde jquerysu archivo jsx donde necesita usar.

Ejemplo :

escribe lo siguiente en 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

escribe lo siguiente en 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>

— solanki ...
fuente

3

Muy útil para reaccionar js novatos como yo

— venugopal

21

Paso 1:

npm install jquery

Paso 2:

touch loader.js

En algún lugar de la carpeta de su proyecto

Paso 3:

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

Etapa 4:

Importe el cargador a su archivo raíz antes de importar los archivos que requieren jQuery

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

Paso 5:

Ahora use jQuery en cualquier lugar de su código:

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

...

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

...

export default SomeClass

— David Joos
fuente

Intenté esto, pero no pude usar $en ningún componente.

— Reema Parakh

De acuerdo, es bastante duro decir algo a tu problema. Puede comprobar los pasos. window.$ = ...asegura que tenga acceso a $cualquier parte de su código si lo ha empaquetado / importado correctamente en la raíz de su proyecto.

— David Joos

1

Sí, olvidé importar $en componente. Gracias.

— Reema Parakh

1

Podría usar jquery con import $ from 'jquery';"pero no pude depurarlo en webstorm hasta que usé su paso 3,window.$ = window.jQuery = require('jquery')

— Kuronashi

Aunque esta es una publicación anterior, me gusta este enfoque en lugar de window. $, Ya que nos da la flexibilidad de usar $. Especialmente para aquellos scripts que necesitamos cargar y necesitamos usar fuera de React.

— Helmut Granda

9

Anteriormente, tenía problemas al usar jquery con React js , así que seguí los pasos para que funcionara:

npm install jquery --save
Luego, import $ from "jquery";

Mira aquí

— hardik chugh
fuente

5

Para instalarlo, simplemente ejecute el comando

npm install jquery

o

yarn add jquery

entonces puedes importarlo en tu archivo como

import $ from 'jquery';

— Guru Prasad mohapatra
fuente

Obtuve "El motor" nodo "es incompatible con este módulo. ¡Versión esperada" 5. * "!

— Altanai