En komponent måste returnera ett enda rotelement, men du vill ofta inte lägga till en extra wrapper <div> bara för att uppfylla denna regel (det kan bryta CSS-layouter som flexbox/grid eller HTML-strukturer som tabeller). Ett Fragment grupperar barn utan att lägga till någon DOM-nod.
() {
(
);
}
Ett bibliotek med IT-intervjufrågor och detaljerade svar — från Junior till Senior.
DoneraOm du hade använt en <div> här i stället skulle du få invalid HTML (<tr><div><td>…), och tabellen skulle bryta. Fragment renderar bara de två <td>-elementen.
<>...</> // short syntax (most common)
<React.Fragment key={item.id}> // full syntax — needed when you must pass a key
...
</React.Fragment>
Använd fullständig form när du renderar en lista med fragment, eftersom den korta <> inte kan ta en key:
{items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.def}</dd>
</React.Fragment>
))}
Fragment håller DOM ren (ingen "wrapper div-soppa"), undviker att bryta semantiska/layout-känsliga strukturer och reducerar lite på nodantalet — allt utan någon runtime-kostnad.