Props: किसी कॉम्पोनेंट को डेटा पास करना

सीखें कि props के माध्यम से डेटा पास करके अपने कॉम्पोनेंट को पुन: उपयोग-योग्य कैसे बनाएँ।

7 मिनट · 3 प्रश्न

एक कॉम्पोनेंट जो हमेशा एक ही चीज़ प्रदर्शित करता है, बहुत उपयोगी नहीं होता। Props ("properties" का संक्षिप्त रूप) वह डेटा है जो आप किसी कॉम्पोनेंट को पास करते हैं, ठीक किसी फ़ंक्शन के आर्गुमेंट की तरह। एक निमंत्रण कार्ड के बारे में सोचें: टेम्पलेट सबके लिए एक जैसा होता है, केवल मेहमान का नाम बदलता है। कॉम्पोनेंट टेम्पलेट है, prop नाम है।

function Greeting(props) {
  return <p>Hello, {props.name}!</p>;
}

function App() {
  return (
    <div>
      <Greeting name="Lea" />
      <Greeting name="Karim" />
    </div>
  );
}

App में, आप name="Lea" को एक HTML एट्रिब्यूट की तरह लिखते हैं: React इन सभी वैल्यू को एक ऑब्जेक्ट में इकट्ठा करता है, जिसे कॉम्पोनेंट props नाम से प्राप्त करता है। फिर आप कर्ली ब्रेसेस के अंदर props.name पढ़ते हैं। व्यवहार में, आप अक्सर props को सीधे फ़ंक्शन की कोष्ठकों में डीस्ट्रक्चर करते हैं: function Greeting({ name })। एक और महत्वपूर्ण बात: टेक्स्ट कोट्स के बीच जाता है, लेकिन बाकी सब कुछ (संख्याएँ, बूलियन, ऐरे) कर्ली ब्रेसेस के बीच जाता है।

function ProfileCard({ name, age }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{age} years old</p>
    </div>
  );
}

function App() {
  return <ProfileCard name="Nadia" age={31} />;
}

यही props की पूरी शक्ति है: एक सोशल नेटवर्क हर पोस्ट के लिए एक कॉम्पोनेंट नहीं लिखता, वह एक ही Post कॉम्पोनेंट लिखता है और उसे लाखों बार अलग-अलग props पास करता है। आप टेम्पलेट एक बार लिखते हैं, आप उसका उपयोग हर जगह करते हैं।

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. props किसलिए हैं?
   • पैरेंट कॉम्पोनेंट से चाइल्ड को डेटा पास करने के लिए
   • समय के साथ बदलने वाले डेटा को संग्रहित करने के लिए
   • किसी कॉम्पोनेंट पर CSS स्टाइल लागू करने के लिए
2. आप किसी Profile कॉम्पोनेंट को संख्या 25 कैसे पास करते हैं?
   • <Profile age="25" />
   • <Profile age={25} />
   • <Profile age=25 />
3. क्या कोई कॉम्पोनेंट उन props को बदल सकता है जो उसे प्राप्त होती हैं?
   • हाँ, जब तक वह ऐसा return के अंदर करता है
   • हाँ, लेकिन केवल स्ट्रिंग
   • नहीं, props केवल-पढ़ने-योग्य हैं