एक उदाहरण के साथ रेंडर प्रॉप्स को समझना

नमस्कार, हेब्र! मैं आपके लिए लेख "उदाहरण द्वारा रेंडर प्रॉप्स सीखें" का अनुवाद प्रस्तुत करता हूं।



ईमानदारी से, इससे पहले कि मैंने उन स्थितियों की कल्पना नहीं की थी जिसमें आप रिएक्ट रेंडर को लागू कर सकते हैं, जब तक कि मैंने एक व्यावहारिक उदाहरण नहीं देखा इसलिए, चलो चलते हैं! या आप TLDR पढ़ सकते हैं;

स्थिति:

हमें एक बटन बनाने का निर्देश दिया गया है जो पेपाल विंडो को खोलता है:


हम अपना संपादक खोलते हैं और PayPalLauncher घटक बनाते हैं:



PayPalLauncher में अतिरिक्त तर्क के साथ पेपाल का उदाहरण हो सकता है, इसलिए इसे (पेपाल) को एक घटक में लपेटना अच्छा होगा।

लेकिन क्या होगा अगर आप अतिरिक्त पेपल आइटम का उपयोग करना चाहते हैं? उदाहरण के लिए:



अब हमारे पास दो बटन हैं और एक नारंगी लिंक है जिसे पेपाल विंडो खोलनी चाहिए। आइए इसे लागू करने के कुछ तरीकों पर गौर करें।

विकल्प 1 - रेंडर में तर्क ()

सबसे पहले, आपको PayPalLauncher के अंदर कोड लिखने के लिए लुभाया जा सकता है:



यहाँ हम एक प्रोप नाम टाइप करते हैं जो यह निर्धारित करता है कि किस पेपल तत्व को रेंडर करना है। कुछ दृश्य परिवर्तनों को व्यक्त करने के लिए बहुत सारे तर्क। यह अभी भी हमें आवश्यकतानुसार किसी भी घटक को आसानी से प्रदान करने से रोकता है। क्या होगा यदि प्रस्तुति से तर्क को अलग करने का कोई तरीका है?

विकल्प 2 - घोंसला बनाना

नेस्टिंग हमें और अधिक समझने योग्य JSX लिखने में मदद करता है।



अब हमारे पास लॉजिक (PayPalLauncher) और व्यू (PayPalButton) के बीच एक स्पष्ट अलगाव है। यह हमें किसी भी घटक को PayPal (PayPal ट्रिगर) तत्व के रूप में प्रदर्शित करने की क्षमता देता है। और यह अच्छी तरह से पढ़ता है! लेकिन हम PayPalLauncher और PayPalButton के बीच प्रॉपर कैसे गुजरते हैं? आइए देखें कि यह PayPalLauncher में कैसा दिखता है:



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

विकल्प 3 - रेंडर प्रॉप्स

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



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

जब हम इसे लागू करते हैं, तो परिणामी संस्करण इस तरह दिखेगा:



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

थोड़ा और:

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



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

सारांश

रेंडर प्रॉप्स का उपयोग करते समय हमें क्या मिलता है?

• तर्क का पुन: उपयोग - तर्क से मानचित्रण को अलग करना, हमें प्रत्येक घटक या दृश्य प्रतिनिधित्व के लिए तर्क को अनुकूलित करने की आवश्यकता नहीं है।
• साफ और अच्छी तरह से पठनीय JSX।
• हमारे रिएक्ट अनुप्रयोगों की संरचना और कार्यात्मक घटक में सुधार हो रहा है।

क्या आप अपने रिएक्ट ऐप्स के बारे में भी चिंतित हैं? नौकरियां खुली हैं!

* याद रखें कि प्रॉप्स प्रस्तुत करना एक पैटर्न है और इसे कई तरीकों से लागू किया जा सकता है - केवल आपको यह चुनना है कि आपके मामले के साथ क्या उपयोग करना है।