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

मैं ReactJS के साथ नौसिखिया हूं। अब तक मैं किसी भी एनीमेशन या कुछ फीचर को सेट करने के लिए JQuery का उपयोग कर रहा हूं। लेकिन अब मैं ReactJS का उपयोग करने और JQuery का उपयोग करके न्यूनतम करने की कोशिश कर रहा हूं।ReQueryJS पर JQuery का उपयोग कैसे करें

मेरे प्रकरण है:
मैं 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(); 
});

मेरे प्रश्न:
1. करने के लिए कि ReactJS में?

धन्यवाद

स्रोत

2016-07-22 ND.Santos

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

मैं उपयोगी यहाँ इस वीडियो में ट्यूटोरियल पाया - https://youtu.be/AMMetkCvztg – Prem

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

उदा।

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

    // ... 
}

आदर्श रूप से, आप एक पुन: प्रयोज्य Accordion घटक बनाना चाहते हैं। इसके लिए आप Jquery का उपयोग कर सकते हैं, या सिर्फ सादे जावास्क्रिप्ट + सीएसएस का उपयोग कर सकते हैं।

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

Codepen यहाँ लिंक: http://codepen.io/jzmmm/pen/JKLwEA?editors=0110

स्रोत

2016-07-22 05:53:38 jzm

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

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

ठीक है! .. धन्यवाद jzm .. –

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

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

चरण 2: npm install jquery --save

चरण 3: NPM का उपयोग कर jQuery स्थापित करने के लिए निम्न आदेश लिखना अब, आयात "$" jQuery से अपने jsx फ़ाइल में जहां का उपयोग करने की जरूरत है।

उदाहरण:

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

में नीचे लिखने सूचकांक में नीचे लिखें।एचटीएमएल

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

स्रोत

2016-12-29 14:25:07

धन्यवाद काम !!! :) – HelpingHand

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

चरण 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

स्रोत

2017-11-28 21:06:59

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

उत्तर

संबंधित मुद्दे