Mik azok a React Fragmentek és miért használod őket?

Question

Accepted Answer

Egy komponensnek **egyetlen root elemet** kell visszaadnia, de gyakran nem akarsz csak egy plusz `

` wrappert hozzáadni ennek a szabálynak a kielégítéséhez (ez megtörheti a CSS layoutokat, mint fl/grid, vagy a HTML struktúrákat, mint az táblázatok). Egy **Fragment** csoportosítja a gyerekeket **anélkül**, hogy DOM csomópontot adna hozzá. ```jsx function TableRow() { return ( <> {/* Fragment — produces NO extra element in the DOM */} Name Email ); } ``` Ha `

` helyett itt ezt használnád, akkor érvénytelen HTML-t kapnál (`

…`), és a táblázat megtörne. A Fragment csak a két ``-t rendereli ki. ## Rövid vs teljes szintaxis ```jsx <>... // short syntax (most common) // full syntax — needed when you must pass a key ... ``` A teljes formát akkor használd, ha **fragmentumok listáját** rendereled ki, mivel a rövid `<>` nem fogadhat el `key`-t: ```jsx {items.map(item => (

{item.term}

{item.def}

))} ``` ## Miért fontos A Fragmentek tisztán tartják a DOM-ot (nincs "wrapper div leves"), elkerülik a szemantikus/layout-érzékeny struktúrák megtörését, és kissé csökkentik a csomópontok számát — mindez nulla futásidejű költséggel.