प्रॉप्स ऐसे गुण हैं जो प्रतिक्रिया घटक को संशोधित करने में मदद करते हैं। बनाए गए घटक का उपयोग विभिन्न मापदंडों के साथ प्रॉप्स अवधारणा का उपयोग करके किया जा सकता है। प्रॉप्स से आप एक कंपोनेंट से दूसरे कंपोनेंट में जानकारी पास कर सकते हैं और साथ ही अपनी जरूरत के अनुसार कंपोनेंट का दोबारा इस्तेमाल कर सकते हैं।
यदि आप ReactJS से अच्छी तरह वाकिफ हैं, तो आप प्रॉप्स से परिचित होंगे, वही अवधारणाएं रिएक्ट नेटिव में अनुसरण करती हैं।
आइए एक उदाहरण पर एक नज़र डालते हैं जो बताता है कि प्रॉप्स क्या हैं।
उदाहरण 1:रिएक्टिव नेटिव बिल्ट-इन कंपोनेंट्स के अंदर प्रॉप्स
छवि घटक पर विचार करें -
<छवि शैली={styles.stretch} स्रोत={{uri:'https://pbs.twimg.com/profile_images/486929358120964097 /gNLINY67_400x400.png'}}/> शैली और स्रोत गुण हैं यानी छवि घटक के लिए सहारा। स्टाइल प्रॉप्स का उपयोग स्टाइल यानी चौड़ाई, ऊंचाई आदि को जोड़ने के लिए किया जाता है, और स्रोत प्रॉप्स का उपयोग उपयोगकर्ता को प्रदर्शित करने के लिए छवि को url असाइन करने के लिए किया जाता है। छवि घटक का स्रोत और शैली और बिल्ड-इन प्रॉप्स।
आप एक वेरिएबल का भी उपयोग कर सकते हैं जो url को संग्रहीत करता है और इसे स्रोत प्रॉप्स के लिए उपयोग करता है जैसा कि नीचे दिखाया गया है -
चलो imgURI ={ uri:'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'};वापसी ( <शैली देखें={styles.container}> <छवि शैली={styles.stretch } स्रोत={imgURI} /> ); नीचे दिया गया उदाहरण बिल्ट-इन प्रॉप्स का उपयोग करके एक साधारण छवि का प्रदर्शन दिखाता है -
<पूर्व> "प्रतिक्रिया" से आयात प्रतिक्रिया; "प्रतिक्रिया-मूल" से आयात {छवि, पाठ, दृश्य, स्टाइलशीट}; const MyImage =() => { let imgURI ={ uri:'https://pbs.twimg. com/profile_images/486929358120964097/gNLINY67_400x400.png' }; वापसी (<देखें शैली={styles.container}> <छवि शैली={styles.stretch} स्रोत={imgURI} /> );}कॉन्स्ट स्टाइल =StyleSheet.create({कंटेनर:{ पैडिंगटॉप:50, पैडिंग लेफ्ट:50, }, स्ट्रेच:{चौड़ाई:200, ऊंचाई:200, रीसाइजमोड:'स्ट्रेच', }});एक्सपोर्ट डिफॉल्ट माईइमेज;उदाहरण 2:कस्टम घटक के अंदर प्रॉप्स
आप एक कंपोनेंट से दूसरे कंपोनेंट को जानकारी भेजने के लिए प्रॉप्स का इस्तेमाल कर सकते हैं। नीचे दिए गए उदाहरण में दो कस्टम घटक बनाए गए हैं, छात्र और विषय।
विषय घटक इस प्रकार है -
कॉन्स्ट सब्जेक्ट =(प्रोप्स) => {रिटर्न ( टेक्स्ट> );} घटक पैरामीटर सहारा लेता है। नाम को props.name के रूप में प्रदर्शित करने के लिए टेक्स्ट घटक के अंदर इसका उपयोग किया जाता है। आइए देखें कि स्टूडेंट कंपोनेंट से सब्जेक्ट कंपोनेंट में प्रॉप्स कैसे पास करें।
छात्र घटक इस प्रकार है -
const छात्र =() => {वापसी ( <देखें> <विषय का नाम ="गणित" /> <विषय का नाम ="भौतिकी" /> <विषय का नाम ="रसायन विज्ञान" /> );} स्टूडेंट कंपोनेंट में सब्जेक्ट कंपोनेंट का इस्तेमाल प्रॉप्स नाम के साथ किया जाता है। उत्तीर्ण मान गणित, भौतिकी और रसायन विज्ञान हैं। नाम के प्रॉप्स में अलग-अलग मान पास करके सब्जेक्ट का फिर से इस्तेमाल किया जा सकता है।
यहाँ आउटपुट के साथ स्टूडेंट और सब्जेक्ट कंपोनेंट के साथ काम करने का उदाहरण दिया गया है।
<पूर्व> 'प्रतिक्रिया' से आयात प्रतिक्रिया; 'प्रतिक्रिया-मूल' से आयात {पाठ, देखें}; कॉन्स्ट विषय =(प्रॉप्स) => {वापसी (<देखें> <पाठ शैली ={{ पैडिंग:"10%", रंग:"हरा" }}>मैं पढ़ रहा हूँ - {props.name}! );}const छात्र =() => {वापसी ( <देखें> <विषय का नाम ="गणित" /> <विषय का नाम ="भौतिकी" /> <विषय का नाम ="रसायन विज्ञान" /> );} डिफ़ॉल्ट छात्र निर्यात करें;आउटपुट
