Verwendung von JQuery mit ReactJS

80

Ich bin neu bei ReactJS. Zuvor habe ich jQuery verwendet, um alle benötigten Animationen oder Funktionen festzulegen. Aber jetzt versuche ich, ReactJS zu verwenden und die Verwendung von jQuery zu minimieren.

Mein Fall ist:

Ich versuche mit ReactJS ein Akkordeon zu bauen.

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

Verwenden von JQuery :

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

Meine Frage:

Wie kann ich das mit ReactJS machen?

javascript jquery reactjs

— ND.Santos
quelle

Können

— Codebrekers

Ich fand nützliches Tutorial hier in diesem Video - youtu.be/AMMetkCvztg

— Prem

3

Bitte versuchen Sie nicht im jQueryInneren zu verwenden react...

— Quirimmo

1

Unter reactjs.org/docs/integrating-with-other-libraries.html finden Sie eine Erklärung, warum die Verwendung von jQuery in react nicht empfohlen wird. Von stackoverflow.com/a/46946447/52277

— Michael Freidgeim

das ist shatnez! Vermeiden Sie es: D en.wikipedia.org/wiki/Shatnez

— Joey Baruch

64

Sie sollten versuchen, jQuery in ReactJS zu vermeiden. Wenn Sie es jedoch wirklich verwenden möchten, fügen Sie es in die Lifecycle-Funktion componentDidMount () der Komponente ein.

z.B

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

  // ...
}

Idealerweise möchten Sie eine wiederverwendbare Akkordeon-Komponente erstellen. Hierfür können Sie Jquery oder einfach nur Javascript + CSS verwenden.

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

Dann können Sie es in jeder Komponente wie folgt verwenden:

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

Codepen-Link hier: https://codepen.io/jzmmm/pen/JKLwEA?editors=0110 (Ich habe diesen Link in https ^ geändert.)

— mnsr
quelle

Thx jzm .. Aber ich brauche noch Informationen über Ihren Code. Ich verstehe nicht ganz, was es bedeutet. Können Sie dies erklären: 1. ref = {a => this._acc = a} 2. let 3. this._acc.children Danke 4 Ihre Hilfe :)

— ND.Santos

1

@ ND.Santos Lesen Sie diese Seite: facebook.github.io/react/docs/more-about-refs.html Das ist die Rückrufreferenzsyntax . Anstelle von ref = "Akkordeon" oder was auch immer verwenden Sie das, was ich verwende, und es gibt den Knoten zurück. Zeichenfolgenreferenz wird als Vermächtnis betrachtet. this._acc = Aufruf der Knotenreferenz (dh Sie erstellen eine Art Variable, die auf den Knoten verweist - Sie können ihn also aufrufen, wie Sie möchten). 'Kinder' sind die Kinderelemente im Inneren <Accordion>. In meinem Codepen-Link können Sie hinzufügen console.log(this._acc), um zu sehen, was es tatsächlich ist.

— Mnrsr

Nice @mnsr Können Sie den Grund für die Verwendung der componentDidMount () -Methode dort erklären?

— Eddie Lam

142

Ja, wir können jQuery in ReactJs verwenden. Hier werde ich erzählen, wie wir es mit npm verwenden können.

Schritt 1: Wechseln Sie package.jsonmit dem Befehl cd zu Ihrem Projektordner, in dem die Datei vorhanden ist.

Schritt 2: Schreiben Sie den folgenden Befehl, um jquery mit npm zu installieren:npm install jquery --save

Schritt 3: Importieren Sie nun $von jqueryin Ihre jsx-Datei, wo Sie verwenden müssen.

Beispiel :

Schreiben Sie das Folgende in 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

Schreiben Sie das Folgende in 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 ...
quelle

1

Sehr nützlich, um auf Neulinge wie mich zu reagieren

— venugopal

19

Schritt 1:

npm install jquery

Schritt 2:

touch loader.js

Irgendwo in Ihrem Projektordner

Schritt 3:

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

Schritt 4:

Importieren Sie den Loader in Ihre Stammdatei, bevor Sie die Dateien importieren, für die jQuery erforderlich ist

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

Schritt 5:

Verwenden Sie jetzt jQuery an einer beliebigen Stelle in Ihrem Code:

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

...

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

...

export default SomeClass

— David Joos
quelle

habe dies versucht, konnte es aber $in keiner Komponente verwenden.

— Reema Parakh

Okay, ziemlich hart, um etwas zu Ihrem Problem zu sagen. Kann die Schritte überprüfen. window.$ = ...stellt sicher, dass Sie Zugriff auf eine $beliebige Stelle in Ihrem Code haben, wenn Sie ihn im Stammverzeichnis Ihres Projekts korrekt gebündelt / importiert haben.

— David Joos

1

Ja, ich habe vergessen, eine $Komponente zu importieren . Vielen Dank.

— Reema Parakh

1

Ich könnte jquery mit verwenden, import $ from 'jquery';"aber ich konnte es nicht im Webstorm debuggen, bis ich Ihren Schritt 3,window.$ = window.jQuery = require('jquery')

— Kuronashi

Obwohl dies ein älterer Beitrag ist, mag ich diesen Ansatz eher als Fenster. $, Da er uns die Flexibilität gibt, nur $ zu verwenden. Speziell für die Skripte, die wir laden und außerhalb von React verwenden müssen.

— Helmut Granda

8

Früher hatte ich Probleme bei der Verwendung von jquery mit React js. Daher habe ich die folgenden Schritte ausgeführt, damit es funktioniert.

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

Siehe hier

— Hardik Chugh
quelle

4

Um es zu installieren, führen Sie einfach den Befehl aus

npm install jquery

oder

yarn add jquery

dann kannst du es wie in deine datei importieren

import $ from 'jquery';

— Guru Prasad Mohapatra
quelle

Erhalten "Der Motor" Knoten "ist nicht kompatibel mit diesem Modul. Erwartete Version" 5. * "!

— Altanai