यह प्रॉप्स का उपयोग करने के तरीके पर एक शुरुआती अनुकूल ट्यूटोरियल है। पढ़ने से पहले यह महत्वपूर्ण है कि आप समझें कि डिस्ट्रक्चरिंग क्या है और घटकों का उपयोग/निर्माण कैसे करें।

प्रॉप्स, प्रॉपर्टी का संक्षिप्त रूप, प्रॉप्स हमें मूल घटकों से चाइल्ड घटकों तक जानकारी भेजने की अनुमति देता है, यह भी ध्यान रखना महत्वपूर्ण है कि वे कोई भी डेटा प्रकार हो सकते हैं।

यह समझना जरूरी है कि आपके किसी भी घटक के लिए प्रोप बनाने का सिंटैक्स क्या है। रिएक्ट में, आपको HTML टैग के लिए एक विशेषता लिखने के लिए समान सिंटैक्स का उपयोग करना होगा। जिस तरह से हम किसी प्रोप को निर्दिष्ट करते हैं, उसे अपने तत्व के भीतर इस तरह डालते हैं:

ParentPlant() {
  return  
}

प्रॉप्स बनाते समय याद रखने योग्य एक अच्छा नियम है: स्ट्रिंग्स को उनके मूल्य के आसपास घुंघराले ब्रेसिज़ की आवश्यकता नहीं है, हम केवल अन्य डेटा प्रकारों के लिए ऐसा करते हैं। जैसा कि आप ऊपर देख सकते हैं, हम मूल घटक को असाइन करके ढेर सारे प्रॉप्स प्राप्त कर सकते हैं। जब हमारे घटक के भीतर हमारे प्रॉप्स होते हैं तो यह जानना महत्वपूर्ण है कि हम तकनीकी रूप से उन्हें पास कर रहे हैं। एक बार जब हम अपने प्रॉप्स को नीचे भेज देते हैं तो हमें उन्हें अपने वांछित घटक के भीतर प्राप्त करने में सक्षम होने की आवश्यकता होती है। इस मामले में हमारा चाइल्डप्लांट घटक।

प्रस्ताव प्राप्त करना:

function ChildPlant(props) {
  return (
    
      {props.text} {props.number}
    >
  )
}

हम यहां चीजें कर रहे हैं: 1. हम अपने चाइल्डप्लांट घटक के पैरामीटर के भीतर अपना प्रोप प्राप्त कर रहे हैं, 2. हम अपने प्रोप के नाम के माध्यम से अपने प्रोप के मूल्यों को नष्ट कर रहे हैं। यह जानना महत्वपूर्ण है कि हमारा प्रॉप्स एक पैरामीटर नहीं है, बल्कि एक पैरामीटर के समान कार्य करता है।

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

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

इसे विज़ुअलाइज़ करने का एक अच्छा तरीका यहां दिया गया है:

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