Cách sử dụng JQuery với ReactJS

84

Tôi mới sử dụng ReactJS. Trước đây, tôi đã sử dụng jQuery để đặt bất kỳ hoạt ảnh hoặc tính năng nào mà tôi cần. Nhưng bây giờ tôi đang cố gắng sử dụng ReactJS và giảm thiểu việc sử dụng jQuery.

Trường hợp của tôi là:

Tôi đang cố gắng xây dựng một đàn accordion với 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>

sử dụng JQuery :

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

Câu hỏi của tôi:

Làm cách nào để làm điều này với ReactJS?

javascript jquery reactjs

— ND.Santos
nguồn

bạn có thể kiểm tra liên kết này có thể giúp bạn thảo luận.reactjs.org/t/jquery

— with

Tôi tìm thấy hướng dẫn hữu ích ở đây trong bộ phim này - youtu.be/AMMetkCvztg

— Prem

4

xin vui lòng, cố gắng không sử dụng jQuerybên trong react...

— quirimmo

1

Xem reactjs.org/docs/integrating-with-other-libraries.html với giải thích lý do tại sao không nên sử dụng jQuery bên trong phản ứng. Từ stackoverflow.com/a/46946447/52277

— Michael Freidgeim

đây là shatnez! tránh nó: D en.wikipedia.org/wiki/Shatnez

— Joey Baruch

68

Bạn nên thử và tránh jQuery trong ReactJS. Nhưng nếu bạn thực sự muốn sử dụng nó, bạn phải đặt nó trong hàm vòng đời componentDidMount () của thành phần.

ví dụ

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

  // ...
}

Tốt nhất, bạn muốn tạo một thành phần Accordion có thể tái sử dụng. Đối với điều này, bạn có thể sử dụng Jquery hoặc chỉ sử dụng javascript + CSS thuần túy.

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

Sau đó, bạn có thể sử dụng nó trong bất kỳ thành phần nào như vậy:

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 Codepen tại đây: https://codepen.io/jzmmm/pen/JKLwEA?editors=0110 (Mình đã đổi link này thành https ^)

— mnsr
nguồn

Thx jzm .. Nhưng tôi vẫn cần thông tin về mã của bạn. Tôi không hiểu nó có nghĩa là gì. Bạn có thể giải thích về điều này: 1. ref = {a => this._acc = a} 2. hãy 3. this._acc.children Thanks 4 giúp đỡ của bạn :)

— ND.Santos

1

@ ND.Santos Đọc trang này: facebook.github.io/react/docs/more-about-refs.html đó là cú pháp tham chiếu gọi lại. Vì vậy, thay vì ref = "accordion" hoặc bất cứ thứ gì, bạn sử dụng những gì tôi sử dụng và nó trả về nút. chuỗi ref được coi là kế thừa. this._acc = gọi tham chiếu của nút (nghĩa là bạn tạo một loại biến tham chiếu đến nút - vì vậy bạn có thể gọi nó bất cứ thứ gì bạn muốn). 'trẻ em' là các yếu tố trẻ em bên trong <Accordion>. Trong liên kết codepen của tôi, bạn có thể thêm console.log(this._acc)để xem nó thực sự là gì.

— mnsr

Đẹp @mnsr Bạn có thể giải thích lý do sử dụng phương thức componentDidMount () ở đó không?

— Eddie Lam

152

Có, chúng ta có thể sử dụng jQuery trong ReactJs. Ở đây tôi sẽ cho biết cách chúng ta có thể sử dụng nó bằng npm.

Bước 1: Đi tới thư mục dự án của bạn nơi package.jsontệp hiện diện thông qua sử dụng terminal bằng lệnh cd.

bước 2: Viết lệnh sau để cài đặt jquery bằng npm:npm install jquery --save

Bước 3: Bây giờ, nhập $từ jquerytệp jsx của bạn vào nơi bạn cần sử dụng.

Ví dụ :

viết bên dưới trong 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

viết bên dưới trong 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 ...
nguồn

2

Rất hữu ích cho phản ứng js người mới như tôi

— Venugopal

21

Bước 1:

npm install jquery

Bước 2:

touch loader.js

Ở đâu đó trong thư mục dự án của bạn

Bước 3:

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

Bước 4:

Nhập trình tải vào tệp gốc của bạn trước khi bạn nhập các tệp yêu cầu jQuery

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

Bước 5:

Bây giờ hãy sử dụng jQuery ở bất kỳ đâu trong mã của bạn:

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

...

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

...

export default SomeClass

— David Joos
nguồn

đã thử điều này, nhưng không thể sử dụng $trong bất kỳ thành phần nào.

— Reema Parakh

Được rồi, khá khó để nói bất cứ điều gì cho vấn đề của bạn. Có thể kiểm tra lại các bước. window.$ = ...đảm bảo rằng bạn có quyền truy cập vào $bất kỳ nơi nào trong mã của mình nếu bạn đã gói / nhập chính xác nó vào thư mục gốc của dự án.

— David Joos

1

Có, tôi quên nhập $thành phần. Cảm ơn.

— Reema Parakh

1

Tôi có thể sử dụng jquery với import $ from 'jquery';"nhưng tôi couldnt gỡ lỗi nó trong webstorm cho đến khi tôi sử dụng bước 3,window.$ = window.jQuery = require('jquery')

— Kuronashi

Mặc dù đây là một bài đăng cũ hơn nhưng tôi thích cách tiếp cận này hơn là cửa sổ. $ Vì nó mang lại cho chúng ta sự linh hoạt khi chỉ sử dụng $. Đặc biệt cho những script mà chúng ta cần tải và cần được sử dụng bên ngoài React.

— Helmut Granda

9

Trước đó, tôi gặp phải vấn đề khi sử dụng jquery với React js , vì vậy tôi đã thực hiện các bước sau để làm cho nó hoạt động-

npm install jquery --save
Sau đó, import $ from "jquery";

Xem tại đây

— hardik chugh
nguồn

5

Để cài đặt nó, chỉ cần chạy lệnh

npm install jquery

hoặc là

yarn add jquery

thì bạn có thể nhập nó vào tệp của mình như

import $ from 'jquery';

— Guru Prasad mohapatra
nguồn

Có nút "Công cụ" không tương thích với mô-đun này. Phiên bản mong đợi "5. *"!

— Altanai