Що робить `<React.Fragment>`?
React.Fragment - це спеціальний компонент-обгортка в React,
який дозволяє групувати кілька елементів без додавання зайвого вузла в DOM.
Проблема, яку вирішує React.Fragment
У React кожен компонент повинен повертати один кореневий елемент:
function App() {
return (
<h1>Hello</h1>
<p>How are you?</p>
);
}Помилка:
"Adjacent JSX elements must be wrapped in an enclosing tag."
Щоб це виправити, можна обгорнути елементи в <div>, але це створить зайвий HTML-елемент:
function App() {
return (
<div>
<h1>Hello</h1>
<p>How are you?</p>
</div>
);
}У DOM з'явиться:
<div>
<h1>Hello</h1>
<p>How are you?</p>
</div>Іноді цей <div> взагалі не потрібен (наприклад, у таблиці, списку, сітці).
Рішення: <React.Fragment>
function App() {
return (
<React.Fragment>
<h1>Hello</h1>
<p>How are you?</p>
</React.Fragment>
);
}Тепер React групує елементи логічно, але не додає обгортку в DOM.
У результаті DOM виглядає так:
<h1>Hello</h1>
<p>How are you?</p>Короткий запис: <>...</>
Те саме, тільки коротше:
function App() {
return (
<>
<h1>Hello</h1>
<p>How are you?</p>
</>
);
}Це синтаксичний цукор для <React.Fragment>.
Коли це особливо корисно
- У таблицях і списках:
function TableRow() {
return (
<>
<td>Name</td>
<td>Age</td>
</>
);
}Без Fragment довелося б використовувати зайвий <tr> або <div>, що ламає таблицю.
2. При поверненні кількох елементів у map:
const items = ["apple", "banana", "orange"];
return items.map((fruit, i) => (
<React.Fragment key={i}>
<h3>{fruit}</h3>
<hr />
</React.Fragment>
));Тут key можна задати тільки з React.Fragment,
а короткий синтаксис <>...</> ключі не підтримує.
Підсумок
| Що робить | Пояснення |
|---|---|
| Групує кілька JSX-елементів | Без додавання зайвого елемента в DOM |
Дозволяє уникнути непотрібних <div> | Особливо в таблицях і списках |
Може мати key | Тільки повна форма <React.Fragment key={...}> |
| Не відображається в DOM | Це "невидима" обгортка |
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.