JSX में Children और Nesting
JSX में children वह सब कुछ है जो आप एक component के opening और closing tags के बीच रखते हैं, एक sandwich के अंदर की filling जैसा।
In this page:
Syntax
<Parent>
<Child />
text and <element>nested</element>
</Parent>
function Parent({ children }) {
return <div>{children}</div>;
}Elements को एक-दूसरे के अंदर Nest करना
JSX elements दूसरे JSX elements को children के रूप में contain कर सकते हैं, बिल्कुल nested HTML tags की तरह, आपको छोटे pieces से complex UI build करने देते हुए।
Note:
Nested JSX को consistently indent करें ताकि parent-child structure एक नज़र में readable रहे।
Warning:
एक unclosed nested tag (जैसे बिना </span> वाला एक stray <span>) एक compile error के साथ पूरी JSX structure को तोड़ देता है।
उदाहरण: Nesting Elements Inside Each Other
<!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() {
return (
<div className="card">
<h3>Title</h3>
<p>Some <strong>nested</strong> content.</p>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Card />);
</script>
</body>
</html>Text और Elements को Children के रूप में Mix करना
एक JSX element के children freely plain text को दूसरे elements के साथ mix कर सकते हैं -- React उन्हें वैसे ही order में render करता है जैसे वे appear होते हैं।
Note:
Text और expressions किसी special wrapping के बिना element children के ठीक बगल में बैठ सकते हैं।
Warning:
JSX children के बीच extra unintended whitespace/newlines आमतौर पर React द्वारा उसी तरह collapse किए जाते हैं जैसे HTML whitespace collapse करता है, इसलिए readability के लिए अपनी JSX format करना stray gaps नहीं जोड़ेगा।
उदाहरण: Mixing Text and Elements as Children
<!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 MixedChildren() {
return (
<p>
Hello, <strong>friend</strong>! You have <em>3</em> new messages.
</p>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<MixedChildren />);
</script>
</body>
</html>props.children के ज़रिए Multiple Children Pass करना
हर component को automatically एक special prop मिलता है जिसे children कहा जाता है, जिसमें वह सब कुछ होता है जो इसके opening और closing tags के बीच रखा गया था।
यह आपको wrapper components बनाने देता है -- जैसे एक Card या Panel -- जिन्हें पहले से यह जानने की ज़रूरत नहीं कि उनके अंदर क्या जाएगा। क्योंकि children बस एक normal prop है, आप इसे किसी भी दूसरे prop की तरह ही access करते हैं।
Note:
Cards, modals, या layout wrappers जैसे reusable containers बनाते समय props.children उपयोग करें ताकि callers inner content control करें।
Warning:
अगर एक component self-closing है (जैसे <Card />), तो props.children undefined होगा -- इसे render करने से पहले हमेशा इसकी presence check करें अगर component बिना content उपयोग किया जा सकता है।
उदाहरण: Passing Multiple Children via props.children
<!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({ children }) {
return <div style={{border: "1px solid #ccc", padding: "10px"}}>{children}</div>;
}
function App() {
return (
<Card>
<h3>Card Title</h3>
<p>Card body text</p>
</Card>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- यह भूल जाना कि props.children उपयोग करने वाला एक component बिना content वाला self-closing tag उपयोग करने पर कुछ render नहीं करेगा।
- यह मान लेना कि children हमेशा एक array है -- यह एक single value, एक string, या undefined हो सकता है।
- JSX nesting को automatically इसे provide करने देने के बजाय एक
childrenprop को manually re-declare करना।
चैप्टर सारांश
- Elements एक-दूसरे के अंदर nest हो सकते हैं, बिल्कुल HTML की तरह।
- JSX children plain text और दूसरे elements को freely mix कर सकते हैं।
- हर component को
props.childrenके through अपनी nested content automatically मिलती है। - Wrapper/container components flexible रहने के लिए commonly
props.childrenपर rely करते हैं।
ब्राउज़र सपोर्ट
कोई browser-specific restrictions नहीं -- यह एक core JSX/React composition pattern है।
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: