सुव्यवस्थित React अनुप्रयोग बनाने के लिए पैरेंट और चाइल्ड घटकों के बीच संचार का कुशलतापूर्वक प्रबंधन करना अत्यंत महत्वपूर्ण है। जबकि अधिकांश डेटा प्रवाह के लिए प्रॉप्स पसंदीदा तरीका है, ऐसी स्थितियाँ उत्पन्न होती हैं जहाँ पैरेंट घटक को चाइल्ड के भीतर किसी फ़ंक्शन को सीधे आमंत्रित करने की आवश्यकता होती है। यह लेख यह बताता है कि रेफ्स का उपयोग करके इसे कैसे प्राप्त किया जाए, सर्वोत्तम प्रथाओं पर ध्यान केंद्रित किया जाए और विवेकपूर्ण रेफ उपयोग के महत्व पर प्रकाश डाला जाए।
विषयसूची
- React में रेफ्स को समझना
- पैरेंट क्लास घटकों से चाइल्ड फ़ंक्शंस को कॉल करना
- पैरेंट फंक्शनल घटकों से चाइल्ड फ़ंक्शंस को कॉल करना
- सर्वोत्तम प्रथाएँ और विकल्प
React में रेफ्स को समझना
रेफ्स DOM तत्वों या घटक उदाहरणों तक सीधे पहुँचने का एक तरीका प्रदान करते हैं। वे React घटक के डेटा प्रवाह का हिस्सा नहीं हैं और इन्हें कम ही उपयोग किया जाना चाहिए। जबकि वे चाइल्ड घटकों तक सीधी पहुँच प्रदान करते हैं, इनका अधिक उपयोग करने से कम रखरखाव योग्य और कठिन-से-परीक्षण योग्य कोड बन सकता है। जहाँ तक संभव हो, सामान्य पैरेंट-चाइल्ड संचार के लिए प्रॉप्स का उपयोग करने को प्राथमिकता दें।
पैरेंट क्लास घटकों से चाइल्ड फ़ंक्शंस को कॉल करना
क्लास घटकों में, हम रेफ बनाने के लिए React.createRef() का उपयोग करते हैं और इसे चाइल्ड घटक को असाइन करते हैं। तब पैरेंट चाइल्ड के इंस्टेंस तक पहुँचता है और उसकी विधि को कॉल करता है।
// ChildComponent.js
import React from 'react';
class ChildComponent extends React.Component {
myChildFunction = () => {
console.log('Child function called!');
};
render() {
return <button onClick={this.myChildFunction}>Click Me</button>;
}
}
export default ChildComponent;
// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.childRef = React.createRef();
}
callChildFunction = () => {
if (this.childRef.current) {
this.childRef.current.myChildFunction();
}
};
render() {
return (
<div>
<button onClick={this.callChildFunction}>Call Child Function</button>
<ChildComponent ref={this.childRef} />
</div>
);
}
}
export default ParentComponent;
पैरेंट फंक्शनल घटकों से चाइल्ड फ़ंक्शंस को कॉल करना
इसी तरह की कार्यक्षमता के लिए फंक्शनल घटक useRef हुक का लाभ उठाते हैं। useRef हुक एक परिवर्तनीय ऑब्जेक्ट देता है जिसका .current गुण null पर इनिशियलाइज़ किया जाता है और रेंडर के दौरान बना रहता है।
// ParentComponent.js
import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const childRef = useRef(null);
const callChildFunction = () => {
if (childRef.current) {
childRef.current.myChildFunction();
}
};
return (
<div>
<button onClick={callChildFunction}>Call Child Function</button>
<ChildComponent ref={childRef} />
</div>
);
}
export default ParentComponent;
सर्वोत्तम प्रथाएँ और विकल्प
जबकि रेफ्स सीधी पहुँच प्रदान करते हैं, वे कोड को परीक्षण और तर्क करना कठिन बनाते हैं। रेफ्स का सहारा लेने से पहले इन विकल्पों पर विचार करें:
- कॉलबैक: पैरेंट से चाइल्ड को प्रॉप के रूप में एक फ़ंक्शन पास करें। चाइल्ड को आवश्यकतानुसार यह फ़ंक्शन कॉल करता है, पैरेंट को कोई भी आवश्यक डेटा वापस पास करता है।
- राज्य प्रबंधन पुस्तकालय: Redux या Context API जैसे पुस्तकालय डेटा प्रवाह और घटक संचार का प्रबंधन करने के लिए अधिक संरचित तरीके प्रदान करते हैं, जिससे आपका अनुप्रयोग बनाए रखने और स्केल करने में आसान हो जाता है।
- कस्टम ईवेंट: चाइल्ड घटक से कस्टम ईवेंट डिस्पैच करें और पैरेंट में उनकी सुनवाई करें।
विवेकपूर्ण ढंग से रेफ्स का उपयोग करना याद रखें। जहाँ तक संभव हो, क्लीनर, अधिक अनुमानित डेटा प्रवाह तंत्र को प्राथमिकता दें।