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

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

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

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

Контент

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

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

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

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

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

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

У React **JSX можна передавати всередину компонента як "вкладений контент"**,
а всередині компонента, що приймає, він доступний через `props.children`.

---

## 2. Приклад: базова передача JSX

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

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

Тут:

- `<Card> ... </Card>` - батьківський компонент;
- Все, що всередині (`<h2>` та `<p>`), React передає в `props.children`;
- Компонент `Card` виводить `{props.children}` всередині себе.

Результат:

```javascript
<div class="card">
  <h2>Заголовок картки</h2>
  <p>Опис картки</p>
</div>
```

---

## 3. Деструктуризація для стислості

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

---

## 4. Приклад із кількома вкладеними JSX-елементами

```javascript
<Card>
  <img src="photo.jpg" alt="Фото" />
  <h3>Товар</h3>
  <p>Ціна: $100</p>
  <button>Купити</button>
</Card>
```

Все це буде передано в `props.children` як **масив елементів JSX**:

```javascript
props.children = [
  <img ... />,
  <h3>Товар</h3>,
  <p>Ціна: $100</p>,
  <button>Купити</button>
];
```

---

## 5. Передача JSX як звичайного `prop`

Іноді JSX можна передати не як `children`, а як **іменований prop**.

```javascript
function Layout({ header, footer, children }) {
  return (
    <div>
      <header>{header}</header>
      <main>{children}</main>
      <footer>{footer}</footer>
    </div>
  );
}

function App() {
  return (
    <Layout
      header={<h1>Заголовок сайту</h1>}
      footer={<p>© 2025</p>}
    >
      <p>Основний контент сторінки</p>
    </Layout>
  );
}
```

Так можна передавати **різні JSX-блоки** у визначені "слоти".

---

## 6. Передача JSX через змінні

JSX - це звичайний вираз, його можна зберігати у змінній і передавати як значення `prop`:

```javascript
const content = <p>Це контент картки</p>;

<Card>{content}</Card>
```

Або:

```javascript
<Card content={<p>Контент</p>} />
```

і всередині компонента:

```javascript
function Card({ content }) {
  return <div>{content}</div>;
}
```

---

## 7. Приклад - компонент-контейнер

```javascript
function Modal({ title, children }) {
  return (
    <div className="modal">
      <h2>{title}</h2>
      <div className="modal-content">{children}</div>
    </div>
  );
}

<Modal title="Вхід">
  <form>
    <input placeholder="Email" />
    <input type="password" placeholder="Пароль" />
    <button>Увійти</button>
  </form>
</Modal>
```

Тут `<form>...</form>` - це JSX, переданий як `children`.

---

## 8. Що можна передавати як JSX

Ти можеш передавати:

- текст:

```javascript
  <Card>Привіт!</Card>
  ```
- JSX-елементи:

```javascript
  <Card><p>Опис</p></Card>
  ```
- масив елементів:

```javascript
  <Card>{[<li>1</li>, <li>2</li>]}</Card>
  ```
- навіть **інші компоненти**:

```javascript
  <Card><Button>Купити</Button></Card>
  ```

---

## 9. React.Children API (для просунутих випадків)

Якщо тобі потрібно обробити `children` всередині компонента, React надає спеціальні методи:

```javascript
function Wrapper({ children }) {
  return (
    <div>
      {React.Children.map(children, (child, i) => (
        <div key={i} className="child">{child}</div>
      ))}
    </div>
  );
}
```

`React.Children.map` допомагає безпечно пройтися по всіх переданих JSX-елементах, навіть якщо вони не масив.

---

## 10. Підсумок

| Спосіб | Приклад | Коли використовувати |
|---|---|---|
| `props.children` | `<Card>...</Card>` | Контейнери, layout-компоненти |
| JSX як prop | `<Layout header={<Header />} />` | Декілька "слотів" |
| JSX у змінній | `const c = <p>...</p>` | Динамічна передача |
| `React.Children.map` | Обробка `children` | При складній структурі |

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

Для рев’юера

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

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