Komponentas turi grąžinti vieną root elementą, tačiau dažnai nenorite pridėti papildomo wrapper <div> tik tam, kad patenkintumėte tą taisyklę (tai gali sugadinti CSS layouts, pvz., flex/grid arba HTML struktūras, pvz., tables). Fragment grupuoja children nepridėdamas jokio DOM elemento.
() {
(
);
}
Jei čia naudotumėte <div>, gautumėte netinkamą HTML (<tr><div><td>…), ir lentelė sugestų. Fragment pateikia tik dvi <td> eilutes.
<>...</> // short syntax (most common)
<React.Fragment key={item.id}> // full syntax — needed when you must pass a key
...
</React.Fragment>
Naudokite pilną formą, kai kuriate fragment sąrašą, nes trumpa <> negali turėti key:
{items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.def}</dd>
</React.Fragment>
))}
Fragments neleidžia DOM išpūsti (nėra "wrapper div soup"), išvengti semantic/layout-sensitive struktūrų sugadimo ir šiek tiek sumažinti element skaičių — viskas, naudojant zero runtime kainą.