आप संभवतः प्रॉप्स को पेरेंट से चाइल्ड कंपोनेंट में पास कर रहे हैं, और आपने खुद से सवाल किया है: "हम्म... लेकिन क्या होगा अगर मैं प्रॉप्स को चाइल्ड से पेरेंट कंपोनेंट में पास करना चाहता हूं? मेरा मतलब है... दूसरी तरफ ?", सही? ? मैंने खुद से भी यह सवाल किया है, लेकिन वास्तव में समाधान हैं।

हम उनके माध्यम से जाएंगे।

प्रॉप्स का विशिष्ट प्रवाह क्या है?

प्रॉप्स का सामान्य प्रवाह माता-पिता से बच्चे तक होता है। मूल रूप से, मान लें कि आपके पास एक मूल घटक है जो इस तरह दिखता है:

हमारे पास नीचे दिया गया चाइल्ड घटक बहुत ही प्रिय shadcn/ui घटक लाइब्रेरी से एक बटन घटक का उपयोग करता है। बटन घटक में एक चिल्ड्रन प्रोप है, जो पेरेंट घटक से पारित होता है।

ऊपर, हम बच्चों के प्रोप को पैरेंट कंपोनेंट से चाइल्ड कंपोनेंट में पास कर रहे हैं। अब तक सब अच्छा है, है ना?

यदि हम प्रॉप्स को बच्चे से माता-पिता तक पहुंचाना चाहते हैं तो क्या होगा?

अब, यह वह जगह है जहां चीजें थोड़ी मुश्किल हो जाती हैं, खासकर यदि आप पहली बार इस तरह के तर्क को लागू कर रहे हैं। इसके बारे में मुश्किल हिस्सा शायद यह नहीं है कि इसे कैसे किया जाए, बल्कि यह है कि इसकी कल्पना कैसे की जाए। किसी भी तरह, मैं वहां गया हूं, और उम्मीद है कि मेरा अनुभव आपकी मदद करेगा?

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

और यहां हम चाइल्ड घटक से क्या करते हैं:

लिखित रूप में समझना आसान बनाते हुए, हम दो घटकों के साथ जो हासिल करने की कोशिश कर रहे हैं वह यह है कि हम मूल घटक में राज्य को आरंभ करते हैं, और फिर वेरिएबल्स को चाइल्ड घटक में पास करते हैं, और संबंधित फ़ंक्शन को अपडेट करते हैं मूल घटक में राज्य का मान. इस मामले में, मान लीजिए कि राज्य का मान पहले गलत पर सेट है। जब हम चाइल्ड घटक से बटन पर क्लिक करते हैं, तो यह उस मान को ले लेगा, और जब क्लिक इवेंट पर फ़ंक्शन को कॉल किया जाता है, तो इसे गलत के विपरीत में बदल देगा (! मान इसे नकार देता है)।

बच्चे से माता-पिता तक डेटा स्थानांतरित करते समय एक आम गड़बड़ी

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

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

अब आइए दिखाते हैं कि यह चाइल्ड घटक में कैसा दिखता है:

क्या यह फ़ंक्शन को पास करने, और फिर इसे बच्चे से अपडेट करने, और फिर से माता-पिता के पास भेजने से ज़्यादा साफ़ नहीं है? साफ़-सुथरा, और लागू करने में भी आसान, है न? ?

पढ़ने के लिए आपका शुक्रिया!

यद्यपि रिएक्ट में बच्चे से माता-पिता तक डेटा स्थानांतरित करने के निश्चित रूप से अधिक, और संभावित रूप से अधिक साफ-सुथरे, बेहतर दिखने वाले तरीके हैं, मुझे उम्मीद है कि मेरे लेख को पढ़ने के बाद, आपको डेटा प्रवाह के प्रवाह को समझना आसान हो जाएगा बच्चे से माता-पिता तक, और इसे दो अलग-अलग तरीकों से कैसे लागू किया जाए। कौन जानता है, शायद आपको इसे स्वयं करने का अधिक रचनात्मक तरीका मिल जाएगा? ? यदि हां, तो टिप्पणियों में अपने विचार स्पष्ट करना बहुत सराहनीय होगा!

लेखक के बारे में

मैं पुर्तगाल में स्थित एक सॉफ्टवेयर डेवलपर और तकनीकी लेखक हूं। मुझे सॉफ्टवेयर इंजीनियरिंग का शौक है ?‍? और मुझे अपने दिन-प्रतिदिन नए टूल तलाशना और सामान्य व्यवसाय और तकनीकी समस्याओं के लिए दिलचस्प और रचनात्मक समाधान ढूंढना पसंद है। आप मुझे GitHub पर पा सकते हैं। यदि आपका कोई प्रश्न या प्रतिक्रिया है, तो बेझिझक संपर्क करें! ?