Children и слоты

children — это обычный проп, в котором лежит JSX, поэтому контент даёт вызывающий, а не компонент. Всё, что ты вкладываешь между тегами компонента, приходит как props.children. Компонент рисует обвязку (рамку, отступы, тень) и кладёт children в дырку. Ему никогда не надо знать, что внутри.

function Card({ children }: { children: React.ReactNode }) {
  return <section className="card">{children}</section>;
}

// вызывающий компонует свободно — Card не знает ни о графике, ни о форме
<Card>
  <h3>Выручка</h3>
  <RevenueChart range="30d" />
</Card>

React.ReactNode — это правильный тип для «любого отображаемого контента»: элементы, строки, числа, фрагменты, массивы, null. Ты не перечисляешь, что может быть внутри — в этом весь смысл.

Альтернатива — проп под каждый кусок контента — это «взрыв пропсов», и он становится хуже с каждым запросом дизайна. Смотри, как Card пытается описать свой контент через конфигурацию. Каждое новое требование — новый проп, новая ветка и новый способ для двух пропсов противоречить друг другу.

// жёстко: компонент владеет тем, ЧТО есть контент, через 8 конфиг-пропсов
type CardProps = {
  title: string;
  subtitle?: string;
  bodyText?: string;
  imageUrl?: string;
  badgeText?: string;
  footerText?: string;
  ctaLabel?: string;
  onCta?: () => void;
};

function Card(p: CardProps) {
  return (
    <section className="card">
      {p.imageUrl && <img src={p.imageUrl} alt="" />}
      <h3>{p.title}</h3>
      {p.subtitle && <p className="sub">{p.subtitle}</p>}
      {p.badgeText && <span className="badge">{p.badgeText}</span>}
      {p.bodyText && <p>{p.bodyText}</p>}
      {p.footerText && <footer>{p.footerText}</footer>}
      {p.ctaLabel && <button onClick={p.onCta}>{p.ctaLabel}</button>}
    </section>
  );
}

В первый же раз, когда дизайнеру нужны два бейджа, или тело, содержащее <Chart> вместо текста, или CTA-ссылка — ты добавляешь badgeText2, bodyNode, ctaHref, и интерфейс метастазирует. Компонент закрыт: каждый вид контента нужно предвидеть и закодировать заранее.

Замени контент-пропсы на children, и компонент снова открывается — число пропсов схлопывается, а гибкость растёт. Оставь только те пропсы, что действительно являются собственной заботой компонента (его вариант, его поведение), и пусть композиция несёт контент.

type CardProps = {
  variant?: "default" | "outlined";   // собственная забота карточки
  children: React.ReactNode;          // контент принадлежит вызывающему
};

function Card({ variant = "default", children }: CardProps) {
  return <section className={`card card--${variant}`}>{children}</section>;
}

// любой контент, скомпонованный вызывающим — новый проп никогда не нужен
<Card variant="outlined">
  <CardImage src="/r.png" />
  <h3>Выручка <Badge>live</Badge> <Badge>beta</Badge></h3>
  <RevenueChart range="30d" />
  <a href="/reports">Открыть отчёт</a>
</Card>

Два бейджа, график в теле, CTA-ссылка — ничто из этого не потребовало менять Card. Компонент прошёл путь от восьми контент-пропсов до нуля и теперь может держать контент, который его автор и не представлял. Это выигрыш открытого компонента.

Когда у раскладки несколько отдельных регионов, используй именованные слоты: передавай JSX через именованные пропсы вроде header и footer. Один children идеален, когда контент — это один поток. Но у диалога или каркаса страницы есть фиксированные позиции — шапка сверху, футер снизу, основное тело между ними — и ты хочешь, чтобы компонент размещал каждый регион, пока вызывающий его наполняет. Именованные слоты — это просто пропсы типа React.ReactNode.

type PanelProps = {
  header?: React.ReactNode;   // слот: вызывающий даёт JSX, Panel размещает его
  footer?: React.ReactNode;   // ещё один регион
  children: React.ReactNode;  // основное тело
};

function Panel({ header, footer, children }: PanelProps) {
  return (
    <section className="panel">
      {header && <header className="panel__head">{header}</header>}
      <div className="panel__body">{children}</div>
      {footer && <footer className="panel__foot">{footer}</footer>}
    </section>
  );
}

<Panel
  header={<h2>Настройки <StatusDot ok /></h2>}
  footer={<><Button>Отмена</Button><Button variant="primary">Сохранить</Button></>}
>
  <SettingsForm />
</Panel>

Вызывающий по-прежнему решает, что содержит каждый регион (заголовок со статус-точкой, две кнопки); Panel решает, где регионы стоят. Слоты масштабируются на многорегионные раскладки, которые один children не выразит, не заставляя вызывающего знать внутреннюю разметку.