ఒక కంపోనెంట్ తప్పనిసరిగా ఒక ఏక రూట్ ఎలిమెంట్ ను రిటర్న్ చేయాలి, కానీ ఆ నియమాన్ని సంతృప్తి చేయడానికి అదనపు <div> ర్యాపర్ జోడించాలనుకోరు (ఇది CSS లేআউట్ల جیسے flexbox/grid లేదా HTML నిర్మాణాలను టేబుల్ల వంటివి విచ్ఛిన్నం చేయవచ్చు). Fragment సంతానాలను ఎటువంటి DOM నోడ్ చేర్చకుండా సమూహీకరిస్తుంది.
() {
(
);
}
ీ ఆ స్థానంలో <div> ఉపయోగించినట్లయితే, మీరు చెల్లని HTML (<tr><div><td>…) పొందుతారు, మరియు టేబుల్ విచ్ఛిన్నమవుతుంది. Fragment రెండు <td>లను మాత్రమే రెండర్ చేస్తుంది.
<>...</> // short syntax (most common)
<React.Fragment key={item.id}> // full syntax — needed when you must pass a key
...
</React.Fragment>
fragments యొక్క జాబితా ను రెండర్ చేసేటప్పుడు పూర్తి ఫారమ్ను ఉపయోగించండి, ఎందుకంటే చిన్న <> key తీసుకోలేనప్పుడు:
{items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.def}</dd>
</React.Fragment>
))}
Fragments DOM ను శుద్ధిగా ఉంచుతుంది ("wrapper div soup" లేదు), semantic/layout-sensitive నిర్మాణాలను విచ్ఛిన్నం చేయడాన్ని నిరోధిస్తుంది, మరియు నోడ్ గణనను కొంచెం తగ్గిస్తుంది — అన్నీ సున్నా runtime ఖర్చుతో.