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

Покращити цю статтю

Допрацюйте відповідь до «Що таке children?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

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

`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 усередину компонентів,
> щоб вони могли відображати будь-який довільний контент.
> Це робить компоненти **гнучкими, універсальними та переюзабельними**.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати460 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.