Jak używać JQuery z ReactJS

84

Jestem nowy w ReactJS. Wcześniej używałem jQuery do ustawiania dowolnej animacji lub funkcji, których potrzebowałem. Ale teraz próbuję użyć ReactJS i zminimalizować użycie jQuery.

Mój przypadek to:

Próbuję zbudować akordeon z 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>

przy użyciu JQuery :

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

Moje pytanie:

Jak mogę to zrobić z ReactJS?

javascript jquery reactjs

— ND.Santos
źródło

czy możesz sprawdzić ten link, może pomóc ci w dyskusji. reactjs.org/t/jquery-with-react/683

— Codebrekers

W tym filmie znalazłem przydatny samouczek - youtu.be/AMMetkCvztg

— Prem

4

proszę, staraj się nie używać w jQueryśrodku react...

— quirimmo

1

Zobacz Reactjs.org/docs/integrating-with-other-libraries.html z wyjaśnieniem, dlaczego nie zaleca się używania jQuery inside respond . Ze stackoverflow.com/a/46946447/52277

— Michael Freidgeim

to jest shatnez! unikaj tego: D en.wikipedia.org/wiki/Shatnez

— Joey Baruch

69

Powinieneś unikać jQuery w ReactJS. Ale jeśli naprawdę chcesz go użyć, umieść go w funkcji cyklu życia komponentu componentDidMount ().

na przykład

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

  // ...
}

Idealnie byłoby, gdybyś chciał stworzyć komponent Accordion wielokrotnego użytku. W tym celu możesz użyć Jquery lub po prostu użyć zwykłego javascript + CSS.

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

Następnie możesz go użyć w dowolnym komponencie, takim jak:

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

Link do Codepen tutaj: https://codepen.io/jzmmm/pen/JKLwEA?editors=0110 (zmieniłem ten link na https ^)

— mnsr
źródło

Thx jzm .. Ale nadal potrzebuję informacji o twoim kodzie. Nie bardzo rozumiem, co to znaczy. Czy możesz to wyjaśnić: 1. ref = {a => this._acc = a} 2. pozwól 3. this._acc.children Dziękuję 4 za pomoc :)

— ND.Santos

1

@ ND.Santos Przeczytaj tę stronę: facebook.github.io/react/docs/more-about-refs.html to jest składnia ref callback. Więc zamiast ref = "akordeon" lub cokolwiek innego, używasz tego, czego używam i zwraca węzeł. string ref jest uważany za starsze. this._acc = wywoływanie odwołania do węzła (tj. tworzysz rodzaj zmiennej, która odwołuje się do węzła - więc możesz ją nazwać, jak chcesz). „dzieci” to wewnętrzne elementy potomne <Accordion>. W moim linku codepen możesz dodać, console.log(this._acc)aby zobaczyć, co to właściwie jest.

— mnsr

Nice @mnsr Czy możesz wyjaśnić powód użycia metody componentDidMount ()?

— Eddie Lam

154

Tak, możemy używać jQuery w ReactJs. Tutaj powiem, jak możemy go wykorzystać za pomocą npm.

Krok 1: Przejdź do folderu projektu, w którym package.jsonznajduje się plik, za pomocą terminala za pomocą polecenia cd.

krok 2: Napisz następujące polecenie, aby zainstalować jquery przy użyciu npm:npm install jquery --save

Krok 3: Teraz zaimportuj $z jquerydo pliku jsx, w którym chcesz użyć.

Przykład :

napisz poniżej w 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

napisz poniżej w 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 ...
źródło

4

Bardzo przydatne dla nowicjuszy, takich jak ja

— venugopal

21

Krok 1:

npm install jquery

Krok 2:

touch loader.js

Gdzieś w folderze projektu

Krok 3:

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

Krok 4:

Zaimportuj moduł ładujący do pliku głównego, zanim zaimportujesz pliki, które wymagają jQuery

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

Krok 5:

Teraz użyj jQuery w dowolnym miejscu w kodzie:

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

...

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

...

export default SomeClass

— David Joos
źródło

próbowałem tego, ale nie mogłem go użyć $w żadnym komponencie.

— Reema Parakh

Okej, ciężko powiedzieć cokolwiek na twój problem. Może dwukrotnie sprawdzić kroki. window.$ = ...zapewnia, że masz dostęp do $dowolnego miejsca w kodzie, jeśli poprawnie umieściłeś / zaimportowałeś go w katalogu głównym swojego projektu.

— David Joos

1

Tak, zapomniałem zaimportować $komponentu. Dzięki.

— Reema Parakh

1

Mogę użyć jquery z, import $ from 'jquery';"ale nie mogłem go zdebugować w webstorm, dopóki nie użyłem twojego kroku 3,window.$ = window.jQuery = require('jquery')

— Kuronashi

Chociaż jest to starszy post, podoba mi się to podejście, a nie okno. $, Ponieważ daje nam elastyczność po prostu używania znaku $. Specjalnie dla tych skryptów, które musimy załadować i muszą być używane poza Reactem.

— Helmut Granda

9

Wcześniej miałem problem z używaniem jquery w React js , więc wykonałem następujące kroki, aby to działało-

npm install jquery --save
Następnie, import $ from "jquery";

Spójrz tutaj

— hardik chugh
źródło

5

Aby go zainstalować, po prostu uruchom polecenie

npm install jquery

lub

yarn add jquery

następnie możesz zaimportować go do swojego pliku, np

import $ from 'jquery';

— Guru Prasad mohapatra
źródło

— Pojawił się