children Prop की जानकारी
function ComponentName({ children }) {
return <div>{children}</div>;
}
<ComponentName>
nested content
</ComponentName>props.children में क्या होता है
जब भी आप किसी component के tags के अंदर content nest करते हैं, जैसे <Box>Hello</Box>, वह nested content automatically component को props.children के रूप में pass किया जाता है। यह किसी भी component के लिए होता है, आपको इसे set up करने की ज़रूरत के बिना।
Console.log(props.children) यह exactly देखने का एक quick तरीका है कि क्या pass किया गया।<Box></Box> लिखें tags के बीच कुछ भी न हो, props.children undefined होगा।उदाहरण: What props.children Contains
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Box(props) {
return <div style={{border: "1px solid gray", padding: "8px"}}>{props.children}</div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Box>Hello from children!</Box>);
</script>
</body>
</html>एक Reusable Wrapper बनाना
चूंकि children बस एक normal prop है, यह उन components के लिए ideal है जिनका पूरा काम दूसरे content को wrap करना है, जैसे एक styled panel या एक modal shell। Wrapper को यह जानने की ज़रूरत नहीं कि अंदर क्या है -- यह बस props.children को जहां भी belongs करता है render करता है।
props.children render करता है और कुछ और custom नहीं, सुनिश्चित करें कि यह intentional है -- नहीं तो आप शायद अपनी खुद की markup miss कर रहे हों।उदाहरण: Building a Reusable Wrapper
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Panel({ children }) {
return (
<section style={{background: "#f5f5f5", padding: "12px"}}>
{children}
</section>
);
}
function App() {
return <Panel><h3>Panel Title</h3><p>Panel content.</p></Panel>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Children दूसरे Props के साथ
एक component children को regular named props के साथ एक साथ accept कर सकता है -- वे conflict नहीं करते। यह labeled cards या titled sections जैसे components के लिए आम है, जहां कुछ content props के through configure होता है और दूसरा content normally nested होता है।
children को अपने दूसरे props के साथ destructure करें: function Card({ title, children })।props.children है -- इसे आपके JSX में कहीं explicitly render किया जाना चाहिए, नहीं तो यह नहीं दिखेगा।उदाहरण: Children Alongside Other Props
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Card({ title, children }) {
return (
<div style={{border: "1px solid #ccc", padding: "10px"}}>
<h4>{title}</h4>
{children}
</div>
);
}
function App() {
return <Card title="Notice"><p>This uses both a prop and children.</p></Card>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>- यह उम्मीद करना कि
props.childrenहमेशा एक array होगा -- यह एक single element, string, या undefined हो सकता है। - यह भूल जाना कि एक self-closing component (
<Card />) के बिल्कुल कोई children नहीं होते। childrenको tags के बीच nest करने के बजाय एक named attribute के रूप में pass करने की कोशिश करना।
props.childrenवह content रखता है जो भी एक component के opening और closing tags के बीच nested है।- यह automatically काम करता है -- आपको इसे explicitly declare करने की ज़रूरत नहीं।
- यह commonly wrapper या layout components के लिए use होता है।
- Children text, एक single element, multiple elements, या बिल्कुल कुछ नहीं हो सकते हैं।
कोई browser-specific restrictions नहीं -- children एक core React composition feature है।
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: