Skip to main content

Чому JSX вимагає один кореневий елемент?

ReactJunior~1 хв читання
Запропонувати правку

Коротка відповідь

JSX вимагає один кореневий елемент, тому що React-компонент повинен повертати одне єдине значення - а компіляція JSX перетворює розмітку на виклик React.createElement(), який повертає один об'єкт (React-елемент).

Якщо JSX містить кілька елементів на одному рівні, React не знає, що вважати "головним результатом" функції.

Приклад проблеми

Помилка:

javascript
function App() { return ( <h1>Привіт</h1> <p>Як справи?</p> ); }

Помилка:

"Adjacent JSX elements must be wrapped in an enclosing tag."

Чому? Тому що це перетворюється на щось на кшталт:

javascript
return ( React.createElement("h1", null, "Привіт"), React.createElement("p", null, "Як справи?") );

Але return може повернути лише одне значення, а не два елементи підряд.

Як правильно

  1. Обгортаємо елементи у спільний контейнер:
javascript
function App() { return ( <div> <h1>Привіт</h1> <p>Як справи?</p> </div> ); }
  1. Або використовуємо фрагмент (без зайвого тега в DOM):
javascript
function App() { return ( <> <h1>Привіт</h1> <p>Як справи?</p> </> ); }

Це еквівалент:

javascript
return React.createElement(React.Fragment, null, React.createElement("h1", null, "Привіт"), React.createElement("p", null, "Як справи?") );

Навіщо це обмеження взагалі потрібне?

React повинен побудувати дерево компонентів (Virtual DOM), і кожен компонент повинен мати рівно одну "кореневу ланку".

Інакше React не зможе:

  • коректно визначити, де починається і закінчується компонент;
  • оновлювати або видаляти компонент цілком;
  • пов'язувати стан і життєвий цикл з одним вузлом у дереві.

Аналогія

Уяви, що в тебе є дерево:

javascript
App ┣ Header ┗ Footer

Якщо компонент App поверне два корені (Header і Footer окремо), то дерево стане "з двома стовбурами" - і React не зможе коректно їх обробити.

Підсумок

JSX вимагає один кореневий елемент, тому що:

  • return може повернути лише одне значення;
  • React будує ієрархічне дерево компонентів (Virtual DOM);
  • один корінь гарантує, що компонент = один вузол дерева.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку