props.children и композиция

Разбираем особый проп children и принцип композиции — то, как из мелких компонентов собирают крупные.

props.children — содержимое, которое вы помещаете между открывающим и закрывающим тегами компонента.

Проблема: компонент-обёртка

Допустим, нужна карточка с рамкой и тенью. Внутри — что угодно: текст, картинка, кнопки. Жёстко прописать содержимое нельзя, ведь оно разное. Решение — проп children:

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

Теперь Card просто оборачивает то, что вы положите внутрь:

<Card>
  <h2>Заголовок</h2>
  <p>Произвольный текст внутри карточки.</p>
</Card>

Всё, что между <Card> и </Card>, React передаёт в props.children, а компонент рендерит это в нужном месте.

Композиция вместо наследования

В классическом ООП код переиспользуют через наследование. React идёт другим путём — композицией: сложные компоненты собираются из простых, как из деталей конструктора.

function Avatar({ src }) {
  return <img className="avatar" src={src} alt="" />;
}

function UserBadge({ name, avatar }) {
  return (
    <div className="badge">
      <Avatar src={avatar} />
      <span>{name}</span>
    </div>
  );
}

function Header() {
  return (
    <header>
      <UserBadge name="Аня" avatar="/anya.png" />
    </header>
  );
}

Avatar ничего не знает о UserBadge, а тот — о Header. Каждый делает одно дело и переиспользуется в разных местах. Это делает код понятным и легко изменяемым.

children + другие пропсы

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

function Dialog({ title, children }) {
  return (
    <div className="dialog">
      <h3>{title}</h3>
      <div className="body">{children}</div>
    </div>
  );
}

<Dialog title="Подтверждение">
  <p>Точно удалить файл?</p>
  <button>Да</button>
</Dialog>

Когда что использовать

Итог

• props.children — это содержимое между тегами компонента; так делают универсальные обёртки.
• React предпочитает композицию: крупные компоненты собираются из мелких.
• children свободно сочетается с обычными пропсами.