Komponentin on palautettava yksi juurielementti, mutta usein et halua lisätä vain ylimääräistä wrapper-<div>:iä vain noudattaaksesi sitä sääntöä (se voi hajottaa CSS-asetteluja, kuten flexbox/grid, tai HTML-rakenteita, kuten taulukoita). Fragment ryhmittelee lapset ilman DOM-solmun lisäämistä.
() {
(
);
}
Jos käyttäisit <div>:iä tässä sen sijasta, saisit virheellistä HTML:ää (<tr><div><td>…)، ja taulukko hajoaisi. Fragment renderöi vain kaksi <td>:tä.
<>...</> // short syntax (most common)
<React.Fragment key={item.id}> // full syntax — needed when you must pass a key
...
</React.Fragment>
Käytä täyttä muotoa fragmenttien luettelon renderöinnissä, koska lyhyt <> ei voi ottaa key:ä:
{items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.def}</dd>
</React.Fragment>
))}
Fragmentit pitävät DOM:n puhtaana (ei "wrapper div soppaa"), välttävät semanttisten/asettelun kannalta herkkien rakenteiden hajottamista ja pienentävät hieman solmujen määrää — kaikki ilman runtime-kustannuksia.