React में कंपोनेंट प्रॉप्स

पिछले पाठ में हमने कई उत्पाद उदाहरण प्रदर्शित किए:

jsxfunction App() {
  return <div>
    <Product />
    <Product />
    <Product />
  </div>;
}

अभी तक उत्पाद टैग का प्रत्येक कॉल स्क्रीन पर एक ही चीज़ प्रदर्शित कर रहा है। आइए अब हम प्रत्येक उत्पाद को अद्वितीय बनाएं।

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

इसके लिए हमें कई चरण करने होंगे।

सबसे पहले, उत्पाद टैग को कॉल करते समय हम इस टैग में दो एट्रिब्यूट लिखेंगे: उत्पाद के नाम के साथ name एट्रिब्यूट और मूल्य के साथ cost एट्रिब्यूट, इस तरह:

jsxfunction App() {
  return <div>
    <Product name="product1" cost="100" />
    <Product name="product2" cost="200" />
    <Product name="product3" cost="300" />
  </div>;
}

इन एट्रिब्यूट के नाम और मान हमारे कंपोनेंट Product के कंस्ट्रक्टर फंक्शन के पहले पैरामीटर में एक ऑब्जेक्ट के रूप में पास होंगे:

jsxfunction Product(props) {
  console.log(props); // name और cost की वाली ऑब्जेक्ट
  
  return <p>
    product
  </p>;
}

पैरामीटर का नाम कोई भी हो सकता है, लेकिन React में इसे props नाम देना प्रचलित है। वास्तव में, यह सिर्फ एक पैरामीटर का नाम नहीं है, बल्कि React की एक महत्वपूर्ण अवधारणा है।

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

आइए इसे करें:

jsxfunction Product(props) {
  return <p>
    name: <span>{props.name}</span>,
    cost: <span>{props.cost}</span>
  </p>;
}

अधिक सुविधाजनक और अधिक प्रचलित props ऑब्जेक्ट का उपयोग न करना है, बल्कि फंक्शन के पैरामीटर में ही प्रॉप्स का डीस्ट्रक्चरिंग करना है:

jsxfunction Product({ name, cost }) {
  return <p>
    name: <span>{name}</span>,
    cost: <span>{cost}</span>
  </p>;
}