Fragments za React ni nini na kwa nini kuzitumia?

Question

Accepted Answer

Kigae lazima kirudi kipengele kimoja cha **mizizi**, lakini mara nyingi hutaki kuongeza `

` ya ziada tu ili kutosheleza kanuni hii (inaweza kuvunja CSS layouts kama flexbox/grid au HTML structures kama tables). **Fragment** inachanganya watoto **bila** kuongeza node yoyote ya DOM. ```jsx function TableRow() { return ( <> {/* Fragment — produces NO extra element in the DOM */} Name Email ); } ``` Kama ungekuwa unatumia `

` hapa badala yake, ungepata HTML batili (`

…`), na jedwali lingekufa. Fragment inaonekeza tu `` mbili. ## Syntax fupi vs syntax kamili ```jsx <>... // short syntax (most common) // full syntax — needed when you must pass a key ... ``` Tumia fomu kamili wakati wa kurendera **orodha ya fragments**, kwa sababu fupi `<>` haiwezi kuchukua `key`: ```jsx {items.map(item => (

{item.term}

{item.def}

))} ``` ## Kwa nini inasadiki Fragments huweka DOM safi (hakuna "wrapper div soup"), zinazuia kuvunja structures za semantic/layout-sensitive, na kupunguza kidogo idadi ya nodes — yote bila gharama yoyote ya runtime.