children prop से पुन: उपयोग योग्य कंटेनर कंपोनेंट बनाएँ और अपनी स्क्रीनों को स्पष्ट ज़िम्मेदारियों में विभाजित करें।
इस पाठ को Kodokon में खोलेंकुछ कंपोनेंट अपनी सामग्री पहले से नहीं जानते: एक कार्ड, एक मोडल विंडो, एक लेआउट। React इसे विशेष children prop से हल करता है: किसी कंपोनेंट के खुलने और बंद होने वाले टैग के बीच जो कुछ भी आप रखते हैं वह उसे सौंप दिया जाता है, जहाँ चाहे वहाँ डालने के लिए तैयार। कंटेनर फ़्रेम संभालता है, कॉलर सामग्री देता है।
function Card({ children }) {
return <section className="card">{children}</section>;
}
function App() {
return (
<Card>
<h2>Invoice #1024</h2>
<p>Amount: €49.90</p>
</Card>
);
}जब एक ही स्लॉट पर्याप्त नहीं होता, तो JSX को नामित props के माध्यम से पास करें: एक शीर्षक, एक फ़ुटर, एक एक्शन बार। एक prop किसी भी अन्य मान की तरह एक React एलिमेंट प्राप्त कर सकता है। आपको कई “स्लॉट” मिलते हैं, प्रत्येक स्पष्ट रूप से नामित।
function Modal({ title, footer, children }) {
return (
<div className="modal">
<header>{title}</header>
<div className="modal-body">{children}</div>
<footer>{footer}</footer>
</div>
);
}कंपोज़िशन विभाजन का भी मार्गदर्शन करता है। एक कंपोनेंट की एक पहचानी जा सकने वाली ज़िम्मेदारी होनी चाहिए: एक उपयोगकर्ता पंक्ति दिखाना, एक सूची का लेआउट बनाना। जैसे ही कोई कंपोनेंट कई भूमिकाएँ जमा कर लेता है, उप-कंपोनेंट निकालें: प्रत्येक छोटा हो जाता है, परखने में आसान, और कहीं और पुन: उपयोग योग्य।
function UserList({ users }) {
return (
<ul>
{users.map((user) => (
<UserRow key={user.id} user={user} />
))}
</ul>
);
}
function UserRow({ user }) {
return (
<li>
<strong>{user.name}</strong> - {user.email}
</li>
);
}children prop क्या प्राप्त करता है?children के अलावा किसी अन्य prop में JSX पास कर सकते हैं?