Що таке children?

ReactJunior~1 хв читання

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

children - це спеціальна властивість об'єкта props, у яку React автоматично поміщає весь вміст, переданий усередину компонента між його відкривальним і закривальним тегом.

Тобто:

props.children - це "вкладені елементи" компонента.

Приклад №1 - базовий

javascript

function Card(props) {
  return <div className="card">{props.children}</div>;
}

function App() {
  return (
    <Card>
      <h2>Заголовок</h2>
      <p>Текст картки</p>
    </Card>
  );
}

Що відбудеться:

В App ми передали у <Card> два елементи - h2 і p;
React автоматично помістить їх у props.children;
Компонент Card рендерить їх усередині div.

Тобто:

javascript

props.children = [
  <h2>Заголовок</h2>,
  <p>Текст картки</p>
];

Приклад №2 - деструктуризація

Можна не писати props.children, а дістати його напряму:

javascript

function Card({ children }) {
  return <div className="card">{children}</div>;
}

Приклад №3 - компонент-обгортка

children ідеально підходить для створення універсальних "контейнерів".

javascript

function Layout({ children }) {
  return (
    <div className="layout">
      <header>Header</header>
      <main>{children}</main>
      <footer>Footer</footer>
    </div>
  );
}

function App() {
  return (
    <Layout>
      <h1>Головна сторінка</h1>
      <p>Контент усередині Layout</p>
    </Layout>
  );
}

Усе, що між <Layout> і </Layout>, буде передано як children і відрендерено в <main>.

Приклад №4 - передача інших компонентів

javascript

function Button({ children }) {
  return <button className="btn">{children}</button>;
}

<Button>Натисни мене</Button>
<Button><strong>Зберегти</strong></Button>

children може бути:

текстом;
JSX-елементом;
іншим компонентом;
масивом елементів;
null (якщо нічого не передано).

Приклад №5 - умовний рендеринг `children`

Можна відображати children лише за певної умови:

javascript

function Modal({ isOpen, children }) {
  if (!isOpen) return null;
  return <div className="modal">{children}</div>;
}

<Modal isOpen={true}>
  <p>Вікно відкрито</p>
</Modal>

Приклад №6 - функція як `children` (advanced pattern)

Іноді children може бути функцією - це називається "render props".

javascript

function List({ children }) {
  const items = ["яблуко", "банан", "груша"];
  return <ul>{items.map(children)}</ul>;
}

<List>
  {(item) => <li key={item}>{item.toUpperCase()}</li>}
</List>

Тут children - функція, і React викликає її для кожного елемента масиву.

Приклад №7 - якщо `children` відсутній

Якщо нічого не передано:

javascript

<Card />

→ props.children === undefined.

Це можна обробити:

javascript

function Card({ children }) {
  return <div>{children || "Немає вмісту"}</div>;
}

Підсумок

Що це таке	Пояснення
`props.children`	Усе, що передано всередину компонента
Тип значення	Текст, елемент, компонент, масив, функція
Типово	`undefined`, якщо нічого не передано
Використовується для	Створення обгорток, контейнерів, Layout-компонентів
Можна деструктурувати	`function Comp({ children }) { ... }`

Візуально

javascript

<App>
 ┗ <Card>
     ┣ <h2>Заголовок</h2>
     ┗ <p>Опис</p>
   </Card>

→ У Card:

javascript

props.children = [<h2>Заголовок</h2>, <p>Опис</p>];

Головна думка:

children - це спосіб "вкладати" JSX усередину компонентів, щоб вони могли відображати будь-який довільний контент. Це робить компоненти гнучкими, універсальними та переюзабельними.

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

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

Premium

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