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

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

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

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

Контент

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

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

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

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

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

## Що таке `React.ReactNode`

`React.ReactNode` - це **універсальний тип для будь-якого допустимого вмісту React**,
який може бути **відрендерений всередині JSX**.

Він описує все, що React може "відрисувати" в дереві:

- елементи (`<div />`, `<Component />`),
- рядки і числа,
- булеві значення і `null` / `undefined` (нічого не рендерять),
- масиви таких же сутностей,
- `React.Fragment`.

---

## 1. Формальне визначення (спрощено)

Тобто `React.ReactNode` - це "все, що React може прийняти як дочірній елемент".

---

## 2. Де він використовується

### 1) Для `children`

Найчастіше застосування:

```javascript
type Props = {
  children: React.ReactNode;
};

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

Тепер у `Card` можна передати **будь-який JSX**:

```javascript
<Card>
  <h1>Title</h1>
  <p>Text</p>
  <button>Button</button>
</Card>
```

---

### 2) Для контенту, який може бути JSX, рядком або числом

```javascript
type Props = {
  label: React.ReactNode; // може бути текст, іконка, JSX
};

function Button({ label }: Props) {
  return <button>{label}</button>;
}

<Button label="Save" />
<Button label={<SaveIcon />} />
<Button label={42} />
```

---

### 3) Для списків і масивів JSX-елементів

```javascript
const list: React.ReactNode[] = [
  <li key="1">One</li>,
  <li key="2">Two</li>,
];
```

---

## 3. Відмінність від інших типів

| Тип | Що описує | Приклад використання |
|---|---|---|
| `React.ReactNode` | **Будь-який** вміст, який React може відрендерити | `children`, `content`, `label` |
| `React.ReactElement` | Тільки **один конкретний React-елемент** | `<div />`, `<Component />` |
| `JSX.Element` | Те саме, що `ReactElement` (тип результату JSX) | Значення, яке повертає компонент |
| `ReactNode[]` | Масив вузлів | Списки, фрагменти |

Часто:

- **повернення з компонента**: `JSX.Element` або `ReactElement`
- **пропси-композиції (children)**: `React.ReactNode`

---

## 4. Приклади відмінностей

```javascript
function A(): JSX.Element {
  return <div>Ok</div>; // компонент повертає JSX.Element
}

function B({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>; // приймає будь-який вміст
}
```

---

## 5. Чому не `JSX.Element` для children

`JSX.Element` - занадто вузький тип: він не включає рядки, числа і `null`.

```javascript
// Помилка, якщо використати JSX.Element
function Title({ children }: { children: JSX.Element }) {
  return <h1>{children}</h1>;
}

// Правильно
function Title({ children }: { children: React.ReactNode }) {
  return <h1>{children}</h1>;
}

<Title>Text</Title>; // string - теж ReactNode
```

---

## 6. Коли краще НЕ використовувати `ReactNode`

- Якщо очікується **конкретний тип** (наприклад, функція-рендер-проп), краще вказати `() => ReactNode`.
- Якщо компонент має приймати **тільки елемент**, а не рядок - використовуйте `ReactElement`.

```javascript
type Props = {
  trigger: React.ReactElement; // очікуємо один JSX-елемент
};
```

---

## Підсумок

| Параметр | `React.ReactNode` |
|---|---|
| Що описує | Все, що може бути відрендерено в React |
| Включає | елементи, рядки, числа, `null`, `undefined`, `boolean`, масиви |
| Часто використовується для | `children`, `label`, `content`, `slot` |
| Не включає | функції, об'єкти, проміси (їх не можна напряму рендерити) |
| Альтернатива | `ReactElement`, `JSX.Element` - якщо потрібен тільки один елемент |

---

> Коротко:
> `React.ReactNode` - це **"все, що React може відрисувати"**.
> Використовуй його для `children` і будь-яких пропів, де може бути **будь-який JSX, текст або число**.
>
> Якщо ж ти хочеш дозволити **тільки один React-елемент**, використовуй `ReactElement`.

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

Для рев’юера

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

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