children в React: передача контента в компоненты

children — это специальный пропс в React, который автоматически содержит всё, что находится внутри JSX-тега компонента при его вызове.

Он позволяет передавать вложенный контент из родителя в дочерний компонент, не указывая его явно в списке пропсов.

Как это работает?

Пример

function Wrapper({ children }) {
  return <div className="box">{children}</div>;
}

export default function App() {
  return (
    <Wrapper>
      <h2>Привет!</h2>
      <p>Я внутри компонента Wrapper</p>
    </Wrapper>
  );
}

Компонент Wrapper получает в пропсе children вот этот блок:

<>
  <h2>Привет!</h2>
  <p>Я внутри компонента Wrapper</p>
</>

Зачем нужен children?

• Композиция компонентов: позволяет создавать обёртки (layout, card, modal).
• Повышает переиспользуемость и гибкость.
• Позволяет отделить контейнер от контента.

Примеры использования

Карточка

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

<Card>
  <h3>Hack Frontend</h3>
  <p>Описание карточки</p>
</Card>

Слот под контент:

function Layout({ children }) {
  return (
    <>
      <Header />
      <main>{children}</main>
      <Footer />
    </>
  );
}

<Layout>
  <p>Главная страница</p>
</Layout>

Советы

children может быть:

• строкой
• элементом
• массивом элементов
• функцией (в случае render props)