प्रतिक्रिया में घटकों के बीच मूल्यों को पारित करने पर एक जानकारीपूर्ण मार्गदर्शिका: सर्वोत्तम दृष्टिकोण ढूँढना

प्रतिक्रिया में घटकों के बीच मूल्यों को पारित करने पर एक जानकारीपूर्ण मार्गदर्शिका: सर्वोत्तम दृष्टिकोण ढूँढना

समय टिकट: मार्च ३०, २०२१ ६:२७ अपराह्न
स्रोत नोड: 2585619

रिएक्ट एक लोकप्रिय जावास्क्रिप्ट लाइब्रेरी है जो तेज और कुशल यूजर इंटरफेस बनाने की अपनी क्षमता के लिए डेवलपर्स के बीच लोकप्रियता हासिल कर रही है। रिएक्ट की प्रमुख विशेषताओं में से एक घटकों के बीच मूल्यों को पारित करने की क्षमता है, जो डेवलपर्स को आसानी से जटिल एप्लिकेशन बनाने की अनुमति देती है। इस लेख में, हम रिएक्ट में घटकों के बीच मूल्यों को पारित करने के विभिन्न तरीकों का पता लगाएंगे और आपको अपने प्रोजेक्ट के लिए सर्वोत्तम दृष्टिकोण खोजने में मदद करेंगे।

प्रॉप्स को समझना

रिएक्ट में घटकों के बीच मूल्यों को पारित करने का सबसे आम तरीका प्रॉप्स के माध्यम से है। प्रॉप्स प्रॉपर्टीज़ का संक्षिप्त रूप हैं और डेटा को एक घटक से दूसरे घटक में स्थानांतरित करने के लिए उपयोग किया जाता है। जब किसी घटक को प्रॉप्स प्राप्त होता है, तो वह उस डेटा का उपयोग अपनी सामग्री को प्रस्तुत करने के लिए कर सकता है।

पैरेंट कंपोनेंट से चाइल्ड कंपोनेंट में प्रॉप्स पास करने के लिए, आप बस प्रॉप को चाइल्ड कंपोनेंट में एक विशेषता के रूप में जोड़ें। उदाहरण के लिए, यदि आपके पास ऐप नामक एक मूल घटक और चाइल्ड नामक एक चाइल्ड घटक है, तो आप इस तरह "नाम" नामक एक प्रोप पास कर सकते हैं:

"`

"`

चाइल्ड घटक में, आप "प्रॉप्स" ऑब्जेक्ट का उपयोग करके "नाम" प्रोप तक पहुंच सकते हैं:

"`

फ़ंक्शन चाइल्ड(प्रॉप्स) {

वापसी

नमस्ते {props.name}!

;

}

"`

यह "हैलो जॉन!" प्रस्तुत करेगा। पेज पर।

राज्य का उपयोग करना

रिएक्ट में घटकों के बीच मूल्यों को पारित करने का दूसरा तरीका राज्य के माध्यम से है। स्टेट प्रॉप्स के समान है क्योंकि यह डेटा संग्रहीत करता है, लेकिन इसका उपयोग घटकों के बीच डेटा पास करने के बजाय एक घटक के भीतर डेटा को प्रबंधित करने के लिए किया जाता है।

किसी घटक में राज्य का उपयोग करने के लिए, आपको इसे कंस्ट्रक्टर में परिभाषित करना होगा:

"`

क्लास ऐप React.Component का विस्तार करता है {

कंस्ट्रक्टर (प्रॉप्स) {

महान (प्रॉप्स);

यह.राज्य = {नाम: "जॉन"};

}

प्रदान करना() {

वापस करना ;

}

}

"`

इस उदाहरण में, ऐप घटक में "जॉन" के डिफ़ॉल्ट मान के साथ "नाम" नामक एक स्थिति होती है। फिर चाइल्ड घटक को एक प्रोप के रूप में पारित "नाम" स्थिति के साथ प्रस्तुत किया जाता है।

प्रसंग का उपयोग करना

रिएक्ट में कॉन्टेक्स्ट एक ऐसी सुविधा है जो आपको हर स्तर पर प्रॉप्स को मैन्युअल रूप से पास किए बिना घटक ट्री के नीचे डेटा पास करने की अनुमति देती है। संदर्भ का उपयोग अक्सर वैश्विक डेटा के लिए किया जाता है जिसे कई घटकों द्वारा एक्सेस करने की आवश्यकता होती है।

संदर्भ का उपयोग करने के लिए, आपको सबसे पहले एक संदर्भ ऑब्जेक्ट बनाना होगा:

"`

const MyContext = React.createContext();

"`

फिर आप मूल घटक में इस संदर्भ के लिए एक मान प्रदान कर सकते हैं:

"`

क्लास ऐप React.Component का विस्तार करता है {

प्रदान करना() {

वापसी (

);

}

}

"`

इस उदाहरण में, ऐप घटक "जॉन" की "नाम" संपत्ति के साथ MyContext ऑब्जेक्ट के लिए एक मान प्रदान करता है। चाइल्ड घटक "उपभोक्ता" घटक का उपयोग करके इस मान तक पहुंच सकता है:

"`

फ़ंक्शन चाइल्ड() {

वापसी (

{मान =>

नमस्ते {value.name}!

}

);

}

"`

यह "हैलो जॉन!" प्रस्तुत करेगा। पेज पर।

निष्कर्ष

रिएक्ट में घटकों के बीच मूल्यों को पारित करना जटिल अनुप्रयोगों के निर्माण का एक अनिवार्य हिस्सा है। आप प्रॉप्स, स्टेट या संदर्भ का उपयोग करना चुनते हैं या नहीं, यह आपके प्रोजेक्ट की विशिष्ट आवश्यकताओं पर निर्भर करेगा। घटकों के बीच मूल्यों को पारित करने के विभिन्न तरीकों को समझकर, आप इस बारे में सूचित निर्णय ले सकते हैं कि आपके आवेदन के लिए कौन सा दृष्टिकोण सर्वोत्तम है।