Children и композиция

Иногда компоненту нужно не значение, а целый кусок разметки: карточка с рамкой, внутри которой может быть что угодно. Такой кусок передают между открывающим и закрывающим тегом, а компонент получает его в специальном пропе children. Сборку интерфейса из таких вложенных друг в друга компонентов называют композицией.

Компонент-обёртка

Создайте src/components/Card.jsx:

// src/components/Card.jsx
export default function Card({ children }) {
  return <div className="card">{children}</div>;
}

children — всё, что окажется между тегами Card. Компонент выводит это внутри рамки и ничего не знает о содержимом.

Использование

// src/App.jsx
import Card from './components/Card.jsx';
 
export default function App() {
  return (
    <Card>
      <h2>Купить молоко</h2>
      <p>До вечера, в магазине у дома.</p>
    </Card>
  );
}

На странице появится блок с классом card, а в нём заголовок и абзац. Добавьте в src/index.css правило .card { border: 1px solid #ccc; padding: 16px; }, чтобы увидеть рамку.

Обёртка с пропсами

children совмещают с обычными пропсами. Например, панель с заголовком — src/components/Panel.jsx:

// src/components/Panel.jsx
export default function Panel({ title, children }) {
  return (
    <section className="card">
      <h2>{title}</h2>
      {children}
    </section>
  );
}

// src/App.jsx
import Panel from './components/Panel.jsx';
import TodoItem from './components/TodoItem.jsx';
 
export default function App() {
  return (
    <Panel title="Сегодня">
      <ul>
        <TodoItem todo={{ id: 1, text: 'Купить молоко', done: false }} />
        <TodoItem todo={{ id: 2, text: 'Позвонить Олегу', done: true }} />
      </ul>
    </Panel>
  );
}

Панель «Сегодня» покажет список из двух задач. Ту же панель можно использовать для блока «Завтра» с другим содержимым.

Каркас страницы

Через children удобно делать общий каркас: шапка и подвал одинаковые, а середина меняется. Создайте src/components/Layout.jsx:

// src/components/Layout.jsx
export default function Layout({ children }) {
  return (
    <>
      <header>Мои задачи</header>
      <main>{children}</main>
      <footer>2026</footer>
    </>
  );
}

В App всё содержимое страницы оборачивают в Layout. Позже в главе о маршрутах похожую роль будет играть общий макет страниц.

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

Частая ошибка

Компонент-обёртка должен сам вывести children. Если забыть это сделать, вложенная разметка пропадёт без ошибок:

// Неправильно: содержимое между тегами Card не появится.
export default function Card() {
  return <div className="card"></div>;
}

Примите children в параметрах и поставьте {children} в нужное место разметки.