Co jsou React Fragments a proč je používáme?

Question

Accepted Answer

Komponenta musí vrátit **jeden kořenový prvek**, ale často nechcete přidat jen tak navíc wrapper `

` jen proto, abyste dodrželi toto pravidlo (může to rozbít CSS rozložení jako flexbox/grid nebo HTML struktury jako tabulky). **Fragment** seskupuje potomky **bez** přidání jakéhokoli DOM uzlu. ```jsx function TableRow() { return ( <> {/* Fragment — produces NO extra element in the DOM */} Name Email ); } ``` Kdybyste zde místo toho použili `

`, dostali byste neplatné HTML (`

…`)، a tabulka by se rozbila. Fragment vykreslí jen dva ``. ## Krátký vs úplný syntax ```jsx <>... // short syntax (most common) // full syntax — needed when you must pass a key ... ``` Verzi s úplným syntaxem používejte při vykreslování **seznamu fragmentů**, protože krátkou formu `<>` nelze použít s `key`: ```jsx {items.map(item => (

{item.term}

{item.def}

))} ``` ## Proč je to důležité Fragmenty udržují DOM čistý (bez "obalu div soup"), zabraňují porušení sémantických/citlivých rozložení a mírně snižují počet uzlů — vše s nulovou runtime režií.