Що таке children у React

children — це спеціальний проп у React, який автоматично містить все всередині JSX тегу компонент під час його виклику.

Це дозволяє передавати вкладений контент з батьківського компонент до дочірнього без явного зазначення в списку пропсів.

Як це працює?

Приклад

tsx

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

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

Компонент Wrapper отримує в пропсі children цей блок:

tsx

<>
  <h2>Привіт!</h2>
  <p>Я всередині компонент Wrapper</p>
</>

Чому children?

Композиція компонентів: дозволяє створювати обгортки (layout, card, modal).
Збільшує повторне використання та гнучкість.
Дозволяє розділяти контейнер від контенту.

Приклади використання

Card

tsx

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

<Card>
  <h3>IT Lead</h3>
  <p>Опис картки</p>
</Card>

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Що таке children у React

#Як це працює?

#Приклад

#Чому children?

#Приклади використання