React Fragments का उपयोग
एक Fragment एक invisible box है जिसे आप elements को group करने के लिए use कर सकते हैं बिना असली page में कोई extra wrapper छोड़े।
Syntax
<>
<element1 />
<element2 />
</>
<React.Fragment key={key}>
<element1 />
<element2 />
</React.Fragment>Fragments क्यों मौजूद हैं
क्योंकि एक component को एक root element return करना चाहिए, unrelated siblings को सिर्फ उस rule को satisfy करने के लिए एक extra <div> में wrap करना असली DOM में एक meaningless node जोड़ता है। एक Fragment आपको कोई extra wrapper element जोड़े बिना elements group करने देता है।
Note:
एक Fragment use करें जब एक wrapper <div> आपकी CSS layout तोड़ दे (उदाहरण के लिए, एक <table> row के अंदर)।
Warning:
Table rows/cells के around एक unnecessary wrapper <div> जोड़ना table layout को उन तरीकों से तोड़ सकता है जिन्हें एक Fragment पूरी तरह avoid करता है।
उदाहरण: Why Fragments Exist
<!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 TwoParagraphs() {
return (
<React.Fragment>
<p>First paragraph, no wrapping div.</p>
<p>Second paragraph, still no wrapping div.</p>
</React.Fragment>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<TwoParagraphs />);
</script>
</body>
</html>Shorthand <>...</> Syntax
React.Fragment के पास एक shorthand syntax है, empty angle brackets <> और </>, जो exactly वही काम कम typing के साथ करता है।
Note:
Shorthand <> syntax एक key prop नहीं ले सकता -- fragments की एक list render करते समय पूरा <React.Fragment key={...}> form उपयोग करें।
Warning:
Shorthand fragment <></> उन developers को एक typo जैसा लगता है जो इससे unfamiliar हैं -- shared code में इसे use करते समय एक brief comment help कर सकता है।
उदाहरण: The Shorthand <>...</> Syntax
<!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 ShorthandFragment() {
return (
<>
<h3>Heading</h3>
<p>Paragraph, both inside a shorthand fragment.</p>
</>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<ShorthandFragment />);
</script>
</body>
</html>Lists में Keys के साथ Fragments
जब आपको एक loop के अंदर एक fragment चाहिए, shorthand <>...</> syntax उपयोग नहीं किया जा सकता क्योंकि यह key attribute accept नहीं करता। उस case में आपको इसके बजाय पूरा <React.Fragment key={...}> form उपयोग करना चाहिए, ताकि React हर item को correctly track कर सके।
Note:
सिर्फ तब full React.Fragment form पर switch करें जब आपको specifically एक key pass करनी हो -- नहीं तो <> shorthand ज़्यादा simple रहता है।
Warning:
एक list के अंदर एक Fragment पर key भूल जाना वही "missing key" warning produce करता है जो इसे एक normal element पर भूलने से होता है।
उदाहरण: Fragments with Keys in Lists
<!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 ItemPair({ name, id }) {
return (
<React.Fragment key={id}>
<dt>{name}</dt>
<dd>Details for {name}</dd>
</React.Fragment>
);
}
function App() {
const items = [{id: 1, name: "Apple"}, {id: 2, name: "Banana"}];
return <dl>{items.map(i => <ItemPair key={i.id} {...i} />)}</dl>;
}
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. #}
आम गलतियां
- JSX को सिर्फ single-root-element rule satisfy करने के लिए एक unnecessary <div> में wrap करना, DOM को cluttering करते हुए।
- <>...</> shorthand में एक
keyprop जोड़ने की कोशिश करना, जो supported नहीं है। - यह न realize करना कि Fragments zero extra DOM nodes produce करते हैं -- directly एक Fragment को style करने की उम्मीद करना।
चैप्टर सारांश
- JSX को एक single root element चाहिए, लेकिन Fragments इसके लिए एक extra real DOM node जोड़ने से बचते हैं।
- Shorthand
<>...</>एक Fragment लिखने का सबसे common तरीका है। - पूरा
<React.Fragment>form तब चाहिए जब एकkeyprop की ज़रूरत हो, जैसे lists में। - Fragments का कोई visual effect नहीं है और rendered HTML में कुछ नहीं जोड़ते।
ब्राउज़र सपोर्ट
कोई browser-specific restrictions नहीं -- Fragments React 16.2 से available एक React/JSX feature हैं।
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: