ஒரு கம்போனெண்ட் ஒரு ஒক்கொ ரூட் உறுப்பு ஐ திரும்பக் கொடுக்க வேண்டும், ஆனால் நீங்கள் பெரும்பாலும் இந்த விதியை பூர்த்தி செய்ய அতிரிக்த <div> ரேபர்ஐ சேர்க்க விரும்பவில்லை (இது CSS layouts கள் flexbox/grid அல்லது HTML structures கள் tables போன்றவற்றை உடைக்கலாம்). ஒரு 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 structures களை உடைப்பதைத் தவிர்க்கிறது, மற்றும் node count ஐ சிறிது குறைக்கிறது — அனைத்தும் பூஜ்ய runtime செலவுடன்.