webentwicklung-frage-antwort-db.com.de

So verwenden Sie JQuery auf ReactJS

Ich bin Neuling bei ReactJS. Bis jetzt verwende ich JQuery, um Animationen oder Funktionen festzulegen, die ich brauchte. Aber jetzt versuche ich, ReactJS zu verwenden und mit JQuery zu minimieren.

Mein Fall ist:
Ich versuche, eigenes Akkordeonzu bauen, mit JQuery kann ich das schaffen, aber mit ReactJS komme ich nicht auf die Idee, wie es geht.

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

using JQuery:

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

Meine Frage:
1. Wie geht das in ReactJS?


.__ Danke schon mal

javascriptjqueryreactjs
16
ND.Santos

Sie sollten versuchen, jQuery in ReactJS zu vermeiden. Wenn Sie es jedoch wirklich verwenden möchten, müssen Sie es in die Lebenszyklusfunktion von componentDidMount () der Komponente einfügen.

z.B.

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

  // ...
}

Idealerweise möchten Sie eine wiederverwendbare Accordion-Komponente erstellen. Hierfür können Sie Jquery oder einfach 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)

21
jzm

Ja, wir können jQuery in ReactJs verwenden. Hier erkläre ich, wie wir es mit npm verwenden können.

Schritt 1: Gehen Sie zu Ihrem Projektordner, in dem sich die package.json-Datei befindet, indem Sie das Terminal mit dem Befehl cd verwenden.

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

Schritt 3: Importiere jetzt $ von jquery in deine jsx-Datei, wo du sie verwenden musst. 

Beispiel: 

schreibe das unten 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

schreib 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>
55
solanki...

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 Root-Datei, bevor Sie die Dateien importieren, für die jQuery erforderlich ist

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

Schritt 5:

Verwenden Sie jQuery jetzt an beliebiger 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
3
David Joos

Früher war ich bei der Verwendung von jquery mit React js mit Problemen konfrontiert.

  1. npm install jquery --save

  2. Dann import $ from "jquery";

    Siehe hier

0
hardik chugh

führe einfach den Befehl npm install jquery dann npm yarn add jquery dann kannst du es in deine Datei importieren wie import $ from 'jquery';

0
dadu mohapatra