ReactJS के साथ JQuery का उपयोग कैसे करें


84

मैं ReactJS में नया हूं। पहले मैंने किसी एनीमेशन या फीचर को सेट करने के लिए jQuery का उपयोग किया है जिसकी मुझे आवश्यकता थी। लेकिन अब मैं ReactJS का उपयोग करने और jQuery के उपयोग को कम करने की कोशिश कर रहा हूं।

मेरा मामला है:

मैं 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>

JQuery का उपयोग :

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

मेरा प्रश्न:

मैं रिएक्टजेएस के साथ यह कैसे कर सकता हूं?


आप इस लिंक की जाँच कर सकते हैं मदद मिल सकती है discuss.reactjs.org/t/jquery-with-react/683
Codebrekers

मुझे इस वीडियो में उपयोगी ट्यूटोरियल मिला - youtu.be/AMMetkCvztg
प्रेम

4
कृपया, jQueryअंदर उपयोग न करने का प्रयास करें react...
quirimmo

1
Reajs.org/docs/integrating-with-other-lbooks.html स्पष्टीकरण के साथ देखें कि यह प्रतिक्रिया के अंदर jQuery का उपयोग करने के लिए अनुशंसित क्यों नहीं है। से stackoverflow.com/a/46946447/52277
माइकल Freidgeim

यह shatnez है! इससे बचें: D en.wikipedia.org/wiki/Shatnez
जॉय बरूच

जवाबों:


69

आपको कोशिश करनी चाहिए और ReactJS में jQuery से बचना चाहिए। लेकिन अगर आप वास्तव में इसका इस्तेमाल करना चाहते हैं, तो आप इसे कंपोनेंटडिमाउंट () के जीवनचक्र फंक्शन में डाल देंगे।

जैसे

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

  // ...
}

आदर्श रूप से, आप एक पुन: प्रयोज्य अकॉर्डियन घटक बनाना चाहते हैं। इसके लिए आप Jquery का उपयोग कर सकते हैं, या बस सादे जावास्क्रिप्ट + 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>
    )
  }
}

तो आप इसे किसी भी घटक में उपयोग कर सकते हैं जैसे:

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

यहाँ कोडपेन लिंक: https://codepen.io/jzmmm/pen/JKLwEA?editors=0110 (मैंने इस लिंक को https ^ में बदल दिया)


Thx jzm .. लेकिन मुझे अभी भी आपके कोड के बारे में जानकारी चाहिए। मुझे इसका मतलब नहीं मिला। क्या आप इसके बारे में समझा सकते हैं: 1. रेफ = {a = this._acc = a} 2. let 3. this._acc.children 4 आपकी मदद :)
ND.Santos

1
@ ND.Santos इस पृष्ठ को पढ़ें: facebook.github.io/react/docs/more-about-refs.html कि कॉलबैक रेफ सिंटैक्स है। इसलिए ref = "accordion" या जो भी हो, के बजाय आप जो उपयोग करते हैं उसका उपयोग करते हैं और यह नोड लौटाता है। स्ट्रिंग रेफ को विरासत माना जाता है। this._acc = नोड रेफ को कॉल करना (यानी, आप एक प्रकार का चर बनाते हैं जो नोड को संदर्भित करता है - इसलिए आप इसे जो चाहें कह सकते हैं)। elements चिल्ड्रन ’अंदर के बच्चे तत्व हैं <Accordion>। मेरे कोडपेन लिंक में, आप console.log(this._acc)यह देख सकते हैं कि यह वास्तव में क्या है।
mnsr

Nice @mnsr क्या आप घटकडिमाउंट () विधि का उपयोग करने का कारण बता सकते हैं?
एडी लैम

154

हाँ, हम ReactJs में jQuery का उपयोग कर सकते हैं। यहाँ मैं बताऊंगा कि कैसे हम npm का उपयोग करके इसका उपयोग कर सकते हैं।

चरण 1: अपने प्रोजेक्ट फ़ोल्डर पर जाएं जहां package.jsonफ़ाइल cd कमांड का उपयोग करके टर्मिनल के माध्यम से मौजूद है।

चरण 2: npm का उपयोग करके jquery स्थापित करने के लिए निम्नलिखित कमांड लिखें:npm install jquery --save

चरण 3: अब, अपनी jsx फ़ाइल $से आयात jqueryकरें जहाँ आपको उपयोग करने की आवश्यकता है।

उदाहरण :

नीचे 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

नीचे 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>

4
प्रतिक्रिया के लिए बहुत उपयोगी मेरे जैसे js newbies
venugopal

21

चरण 1:

npm install jquery

चरण 2:

touch loader.js 

कहीं आपके प्रोजेक्ट फोल्डर में तो नहीं

चरण 3:

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

चरण 4:

फ़ाइल को आयात करने से पहले अपनी रूट फाइल में लोडर आयात करें जिसमें jQuery की आवश्यकता होती है

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

चरण 5:

अब अपने कोड में कहीं भी jQuery का उपयोग करें:

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

...

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

...

export default SomeClass

यह कोशिश की, लेकिन $किसी भी घटक में उपयोग नहीं कर सका ।
रीमा पारख

ठीक है, अपनी समस्या के लिए कुछ भी कहने के लिए बहुत कठोर है। दो चरणों की जाँच करें। window.$ = ...यह सुनिश्चित करता है कि आपके पास $आपके कोड में कहीं भी पहुंच है यदि आपने अपनी परियोजना की जड़ में इसे सही ढंग से बंडल / आयात किया है।
डेविड जोस

1
हां, मैं $घटक में आयात करना भूल गया । धन्यवाद।
रीमा पारख '

1
मैं jquery का उपयोग कर सकता था, import $ from 'jquery';"लेकिन मैं इसे वेबस्टॉर्म में डिबग नहीं कर सकता था जब तक कि मैं आपके चरण 3 का उपयोग नहीं करता,window.$ = window.jQuery = require('jquery')
Kuronashi

हालांकि यह एक पुरानी पोस्ट है, मुझे यह दृष्टिकोण पसंद है बजाय खिड़की के। $ क्योंकि यह हमें सिर्फ $ का उपयोग करने की सुविधा देता है। विशेष रूप से उन लिपियों के लिए जिन्हें हमें प्रतिक्रिया के बाहर लोड करने और उपयोग करने की आवश्यकता है।
हेलमुट ग्राण्ड

9

इससे पहले, मैं रिएक्ट के साथ jquery का उपयोग करने में समस्या का सामना कर रहा था, इसलिए मैंने इसे काम करने के लिए निम्न चरणों का पालन किया-

  1. npm install jquery --save

  2. फिर, import $ from "jquery";

    यहाँ देखें


5

इसे स्थापित करने के लिए, बस कमांड चलाएं

npm install jquery

या

yarn add jquery

तो आप इसे अपनी फ़ाइल में आयात कर सकते हैं जैसे

import $ from 'jquery';

समझे "इंजन" नोड इस मॉड्यूल के साथ असंगत है। अपेक्षित संस्करण "5. *"!
अल्टानाई
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.