En komponent skal returnere et enkelt rodelement, men du ønsker ofte ikke at tilføje et ekstra wrapper-<div> bare for at overholde den regel (det kan ødelægge CSS-layouts som flexbox/grid eller HTML-strukturer som tabeller). Et Fragment grupperer børn uden at tilføje noget DOM-knudepunkt.
() {
(
);
}
Et bibliotek af IT-interviewspørgsmål med detaljerede svar — fra Junior til Senior.
DonérHvis du brugte <div> her i stedet for, ville du få ugyldigt HTML (<tr><div><td>…)، og tabellen ville gå i stykker. Fragment gengiver bare de to <td>er.
<>...</> // short syntax (most common)
<React.Fragment key={item.id}> // full syntax — needed when you must pass a key
...
</React.Fragment>
Brug den fulde form, når du gengiver en liste med fragmenter, da den korte <> ikke kan tage en key:
{items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.def}</dd>
</React.Fragment>
))}
Fragmenter holder DOM ren (intet "wrapper div soup"), undgår at ødelægge semantiske/layoutfølsomme strukturer og reducerer nodtallet lidt — alt med nul runtime-omkostninger.