Wie JQuery mit ReactJS
Ich bin neu ReactJS. Früher habe ich verwendet jQuery, eine beliebige animation oder Spielfilm, die ich brauchte. Aber jetzt bin ich versucht zu verwenden, ReactJS und minimieren Sie die Verwendung von jQuery.
Mein Fall ist:
Ich versuche zu bauen, ein Akkordeon mit 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>
mit JQuery:
$('.accor > .head').on('click', function(){
$('.accor > .body').slideUp();
$(this).next().slideDown();
});
Meine Frage:
Wie kann ich das mit ReactJS?
- du kannst diesen link kann Ihnen helfen, discuss.reactjs.org/t/jquery-with-react/683
- Ich fand nützliche tutorial hier in diesem video - youtu.werden/AMMetkCvztg
- bitte, versuchen Sie nicht zu verwenden
jQuery
innenreact
...
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sollten Sie versuchen zu vermeiden und jQuery in ReactJS. Aber wenn Sie wirklich wollen, es zu benutzen, würden Sie es in componentDidMount() lifecycle Funktion der Komponente.
z.B.
Idealerweise würden Sie wollen, erstellen Sie eine wiederverwendbare Accordion-Komponente. Für diese könnten Sie Jquery verwenden, oder verwenden Sie einfach plain javascript + CSS.
Dann können Sie es in einer beliebigen Komponente in etwa so:
Codepen link hier: https://codepen.io/jzmmm/pen/JKLwEA?editors=0110
(Ich änderte diesen link, um https -^)
<Accordion>
. In meinem codepen-link, können Sie hinzufügenconsole.log(this._acc)
um zu sehen, was es tatsächlich ist.Ja, das können wir verwenden jQuery im ReactJs. Hier will ich erzählen, wie wir es benutzen können mithilfe von npm.
Schritt 1: Gehen Sie zu Ihrem Projekt-Ordner, wo die
package.json
- Datei vorhanden ist, über den terminal mittels cd-Befehl.Schritt 2: Schreiben Sie den folgenden Befehl zum installieren von jquery mit npm :
npm install jquery --save
Schritt 3: Jetzt, import
$
ausjquery
in Ihre jsx-Datei, wo Sie brauchen, um zu verwenden.Beispiel:
schreiben, die unten in index.jsx
schreiben, die unten in index.html
Schritt 1:
Schritt 2:
Irgendwo in deinem Projekt-Ordner
Schritt 3:
Schritt 4:
Import der loader in deinem root-Datei vor dem import die Dateien, die erforderlich jQuery
Schritt 5:
Nun jQuery verwenden überall in Ihrem code:
$
in jeder Komponente.window.$ = ...
sorgt dafür, dass Sie Zugang zu$
überall in Ihrem code, wenn Sie gebündelt/importiert es richtig in die Wurzel Ihres Projekts.$
Komponente. Danke.Früher,ich Stand vor dem problem in der Verwendung jquery mit Reagieren js,also ich habe folgende Schritte, um es arbeiten-
npm install jquery --save
Dann
import $ from "jquery";
Siehe hier
führen Sie einfach den Befehl
npm install jquery
dannnpm yarn add jquery
dann importieren Sie es in Ihre Datei wie
import $ von 'jquery';