Eine Komponente muss ein einzelnes Wurzelelement zurückgeben, aber oft möchtest du nicht einfach ein zusätzliches Wrapper-<div> hinzufügen, nur um diese Regel zu erfüllen (es könnte CSS-Layouts wie flexbox/grid oder HTML-Strukturen wie Tabellen zerstören). Ein Fragment gruppiert Kinder ohne einen DOM-Knoten hinzuzufügen.
() {
(
);
}
Wenn du stattdessen ein <div> verwenden würdest, würdest du ungültiges HTML bekommen (<tr><div><td>…)، und die Tabelle würde kaputt gehen. Das Fragment renderert nur die beiden <td>s.
<>...</> // short syntax (most common)
<React.Fragment key={item.id}> // full syntax — needed when you must pass a key
...
</React.Fragment>
Verwende die vollständige Form beim Rendern einer Liste von Fragmenten, da die Kurzform <> keinen key akzeptieren kann:
{items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.def}</dd>
</React.Fragment>
))}
Fragments halten das DOM sauber (kein "Wrapper-Div-Suppe"), vermeiden das Zerstören von semantischen/layoutempfindlichen Strukturen und reduzieren leicht die Knotenzahl — alles mit null Runtime-Kosten.