React Fragment là gì và vì sao dùng nó?

Question

Accepted Answer

Một component phải trả về một **phần tử gốc duy nhất**, nhưng bạn thường không muốn thêm một `

` bọc thừa chỉ để thỏa quy tắc đó (nó có thể phá vỡ layout CSS như flex/grid hoặc cấu trúc HTML như bảng). Một **Fragment** nhóm các phần tử con **mà không** thêm bất kỳ nút DOM nào. ```jsx function TableRow() { return ( <> {/* Fragment — KHÔNG tạo phần tử thừa trong DOM */} Name Email ); } ``` Nếu bạn dùng một `

` ở đây thay vào đó, bạn sẽ có HTML không hợp lệ (`

…`), và bảng sẽ hỏng. Fragment chỉ render hai ``. ## Cú pháp ngắn vs đầy đủ ```jsx <>... // cú pháp ngắn (phổ biến nhất) // cú pháp đầy đủ — cần khi phải truyền key ... ``` Dùng dạng đầy đủ khi render một **danh sách fragment**, vì `<>` ngắn không nhận được `key`: ```jsx {items.map(item => (

{item.term}

{item.def}

))} ``` ## Tại sao điều này quan trọng Fragment giữ DOM sạch (không có "súp div bọc"), tránh phá vỡ các cấu trúc nhạy về ngữ nghĩa/layout, và giảm nhẹ số lượng nút — tất cả với chi phí runtime bằng không.