React
JQuery के साथ ReactJS का उपयोग करना

JQuery के साथ ReactJS

सबसे पहले, आपको jquery पुस्तकालय आयात करना होगा। हम भी findDOmNode को आयात करने की आवश्यकता है क्योंकि हम डोम में हेरफेर करने जा रहे हैं। और जाहिर है हम रिएक्ट भी आयात कर रहे हैं।

import React from 'react';
import { findDOMNode } from ‘react-dom’;
import $ from ‘jquery’;

हम एक एरो फंक्शन 'हैंडलटॉगल' सेट कर रहे हैं जो उस समय फायर करेगा जब एक आइकन पर क्लिक किया जाएगा। हम सिर्फ एक आइकन पर एक संदर्भ नामकरण 'टॉगल' के साथ एक डिव को दिखा और छिपा रहे हैं।

handleToggle = () => {
    const el = findDOMNode(this.refs.toggle);
    $(el).slideToggle();
};

आइए अब 'टॉगल' नामकरण संदर्भ सेट करें

<ul className=”profile-info additional-profile-info-list” ref=”toggle”>
  <li>
    <span className=”info-email”>Office Email</span>   [email protected]
  </li>
</ul>

Div तत्व जहाँ हम onClick पर 'handleToggle' को आग देंगे।

 <div className=”ellipsis-click” onClick={this.handleToggle}>
   <i className=”fa-ellipsis-h”/>
 </div>

नीचे दिए गए पूर्ण कोड की समीक्षा करें कि यह कैसा दिखता है।

import React from ‘react’;
import { findDOMNode } from ‘react-dom’;
import $ from ‘jquery’;

export default class FullDesc extends React.Component {
    constructor() {
        super();
    }

    handleToggle = () => {
        const el = findDOMNode(this.refs.toggle);
        $(el).slideToggle();
    };

    render() {
        return (
            <div className=”long-desc”>
                <ul className=”profile-info”>
                    <li>
                        <span className=”info-title”>User Name : </span> Shuvo Habib
                    </li>
                </ul>

                <ul className=”profile-info additional-profile-info-list” ref=”toggle”>
                    <li>
                        <span className=”info-email”>Office Email</span> [email protected]
                    </li>
                </ul>
                
                <div className=”ellipsis-click” onClick={this.handleToggle}>
                    <i className=”fa-ellipsis-h”/>
                </div>
            </div>
        );
    }
}

हमारा हो गया! यह तरीका है, हम कैसे प्रतिक्रिया घटक में jQuery का उपयोग कर सकते हैं।