Verwendung von JQuery mit ReactJS

Question 1

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?

Question 2

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

Question 3

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>

Question 4

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

Question 5

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

Question 6

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

Answer 1

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

Answer 2

Können

Codebrekers

Answer 3

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

Prem

Answer 4

3

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

Quirimmo

Answer 5

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

Answer 6

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

Joey Baruch

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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

Eddie Lam

Answer 11

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>

Answer 12

1

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

venugopal

Answer 13

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

Answer 14

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

Reema Parakh

Answer 15

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

Answer 16

1

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

Reema Parakh

Answer 17

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

Answer 18

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

Answer 19

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

Answer 20

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

Answer 21

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

Altanai

Verwendung von JQuery mit ReactJS

Antworten: