प्रतिक्रिया में घटकों के बीच मान पारित करने के लिए एक मार्गदर्शिका: इष्टतम परिणामों के लिए युक्तियाँ

प्रतिक्रिया में घटकों के बीच मान पारित करने के लिए एक मार्गदर्शिका: इष्टतम परिणामों के लिए युक्तियाँ

स्रोत नोड: 2596950

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

1. प्रॉप्स का प्रयोग करें

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

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

`` `

फ़ंक्शन पेरेंट() {

वापसी (

);

}

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

वापसी (

नाम: {props.name}

उम्र: {props.age}

);

}

`` `

इस उदाहरण में, हम दो प्रॉप्स, नाम और उम्र, को पेरेंट कंपोनेंट से चाइल्ड कंपोनेंट में पास कर रहे हैं। चाइल्ड घटक इन प्रॉप्स को प्रॉप्स नामक ऑब्जेक्ट के रूप में प्राप्त करता है।

2. राज्य का प्रयोग करें

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

राज्य को मूल घटक से चाइल्ड घटक में पास करने के लिए, आप इसे एक प्रोप के रूप में पास कर सकते हैं। इसके बाद चाइल्ड कंपोनेंट एक प्रोप के रूप में दिए गए फ़ंक्शन को कॉल करके स्थिति को अपडेट कर सकता है।

उदाहरण के लिए:

`` `

फ़ंक्शन पेरेंट() {

स्थिरांक [गिनती, सेटकाउंट] = उपयोगस्टेट(0);

वापसी (

);

}

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

फ़ंक्शन हैंडलक्लिक () {

प्रॉप्स.सेटकाउंट(प्रॉप्स.काउंट + 1);

}

वापसी (

गिनती: {props.count}

);

}

`` `

इस उदाहरण में, हम काउंट स्टेट और सेटकाउंट फ़ंक्शन को पैरेंट कंपोनेंट से चाइल्ड कंपोनेंट में प्रॉप्स के रूप में पास कर रहे हैं। इसके बाद चाइल्ड घटक सेटकाउंट फ़ंक्शन को कॉल करके गिनती स्थिति को अपडेट कर सकता है।

3. संदर्भ का प्रयोग करें

संदर्भ घटकों के बीच मानों को घटक वृक्ष के प्रत्येक स्तर से गुज़रे बिना पारित करने का एक तरीका है। संदर्भ उन घटकों के बीच डेटा साझा करने का एक तरीका प्रदान करता है जो सीधे संबंधित नहीं हैं।

संदर्भ का उपयोग करने के लिए, आपको सबसे पहले createContext फ़ंक्शन का उपयोग करके एक संदर्भ ऑब्जेक्ट बनाना होगा। फिर आप चाइल्ड घटकों को संदर्भ प्रदान करने के लिए प्रदाता घटक का उपयोग कर सकते हैं।

उदाहरण के लिए:

`` `

कॉन्स्ट काउंटकॉन्टेक्स्ट = createContext();

फ़ंक्शन पेरेंट() {

स्थिरांक [गिनती, सेटकाउंट] = उपयोगस्टेट(0);

वापसी (

);

}

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

स्थिरांक { गिनती, सेटकाउंट } = उपयोगकॉन्टेक्स्ट(काउंटकॉन्टेक्स्ट);

फ़ंक्शन हैंडलक्लिक () {

सेटकाउंट(गिनती + 1);

}

वापसी (

गिनती: {गिनती}

);

}

`` `

इस उदाहरण में, हम पेरेंट कंपोनेंट से चाइल्ड कंपोनेंट में काउंट स्टेट और सेटकाउंट फ़ंक्शन को पास करने के लिए संदर्भ का उपयोग कर रहे हैं। इसके बाद चाइल्ड घटक सेटकाउंट फ़ंक्शन को कॉल करके गिनती स्थिति को अपडेट कर सकता है।

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

समय टिकट:

प्लेटो द्वारा पुनर्प्रकाशित से अधिक

नासा सुपरसोनिक उड़ानों, नए एफएए मानकों के लिए प्रायोगिक ट्रांसपोंडर को ट्रैक करने के लिए फ्लाइटहोरिजनएक्स का उपयोग करता है

स्रोत नोड: 864352
समय टिकट: सितम्बर 25, 2018