Какой тип данных у пропса children в React с TypeScript?

Правильный тип для children — ReactNode

Самый универсальный и правильный тип для пропса children — это React.ReactNode. Он покрывает все возможные случаи использования. Вот как правильно его применить:

import React, { ReactNode } from 'react';

interface CardProps {
  title: string;
  children?: ReactNode; // ? означает, что children опционален
}

function Card({ title, children }: CardProps) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-content">
        {children}
      </div>
    </div>
  );
}

// Использование:
<Card title="Привет">
  Это строка
</Card>

<Card title="Компонент">
  <OtherComponent />
</Card>

<Card title="Несколько элементов">
  <span>Первый</span>
  <span>Второй</span>
</Card>

<Card title="Без children" /> {/* тоже работает */}

Разница между типами

Давайте разберём все типы, чтобы вы понимали, что и когда использовать:

• ReactNode — самый широкий тип. Включает: ReactElement, строки, числа, boolean, null, undefined, массивы из ReactNode, фрагменты React. Это то, что может быть отрендерено React'ом.
• ReactElement — только JSX-элементы (созданные через createElement или JSX). Не включает строки, числа, null. Используйте, если нужно гарантировать, что children — именно компонент.
• JSX.Element — синоним ReactElement в большинстве случаев. Но это не React-специфичный тип, а глобальный тип для JSX.
• ReactChild — устаревший тип, равный ReactElement | string | number. Не включает null, undefined и массивы.
• ReactFragment — только фрагменты React. Крайне редко используется напрямую.

Почему ReactNode — лучший выбор?

В реальной разработке children может быть чем угодно: текстом (динамическим), другими компонентами, условно отрендеренными элементами (condition && <Component />), массивами из .map(). ReactNode покрывает все эти случаи.

Если вам нужно, чтобы children был обязательным (всегда передавался), уберите знак вопроса:

interface CardProps {
  title: string;
  children: ReactNode; // обязательно
}

Если вы используете React 18+, импорт React необязателен для JSX, но для типов его всё равно нужно импортировать:

import type { ReactNode } from 'react'; // type-only импорт (экономит бандл)

Дополнительный совет: children как функция (render props)

Иногда children может быть функцией (паттерн render props). Тогда тип будет другим:

interface DataProviderProps {
  children: (data: DataType) => ReactNode;
}

function DataProvider({ children }: DataProviderProps) {
  const data = { name: 'John' };
  return <>{children(data)}</>;
}

В этом случае children — функция, возвращающая ReactNode. Но это уже частный случай, для обычного использования достаточно ReactNode.

import React, { PropsWithChildren } from 'react';

interface CardProps {
  title: string;
}

function Card({ title, children }: PropsWithChildren<CardProps>) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-content">
        {children}
      </div>
    </div>
  );
}

const Card: React.FC<CardProps> = ({ title, children }) => {
  // children уже типизирован как ReactNode
};