Як передати JSX всередину іншого компонента?

ReactJunior~1 хв читання

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

У React JSX можна передавати всередину компонента як "вкладений контент", а всередині компонента, що приймає, він доступний через props.children.

2. Приклад: базова передача JSX

javascript

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

function App() {
  return (
    <Card>
      <h2>Заголовок картки</h2>
      <p>Опис картки</p>
    </Card>
  );
}

Тут:

<Card> ... </Card> - батьківський компонент;
Все, що всередині (<h2> та <p>), React передає в props.children;
Компонент Card виводить {props.children} всередині себе.

Результат:

javascript

<div class="card">
  <h2>Заголовок картки</h2>
  <p>Опис картки</p>
</div>

3. Деструктуризація для стислості

javascript

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

4. Приклад із кількома вкладеними JSX-елементами

javascript

<Card>
  <img src="photo.jpg" alt="Фото" />
  <h3>Товар</h3>
  <p>Ціна: $100</p>
  <button>Купити</button>
</Card>

Все це буде передано в props.children як масив елементів JSX:

javascript

props.children = [
  <img ... />,
  <h3>Товар</h3>,
  <p>Ціна: $100</p>,
  <button>Купити</button>
];

5. Передача JSX як звичайного `prop`

Іноді JSX можна передати не як children, а як іменований prop.

javascript

function Layout({ header, footer, children }) {
  return (
    <div>
      <header>{header}</header>
      <main>{children}</main>
      <footer>{footer}</footer>
    </div>
  );
}

function App() {
  return (
    <Layout
      header={<h1>Заголовок сайту</h1>}
      footer={<p>© 2025</p>}
    >
      <p>Основний контент сторінки</p>
    </Layout>
  );
}

Так можна передавати різні JSX-блоки у визначені "слоти".

6. Передача JSX через змінні

JSX - це звичайний вираз, його можна зберігати у змінній і передавати як значення prop:

javascript

const content = <p>Це контент картки</p>;

<Card>{content}</Card>

Або:

javascript

<Card content={<p>Контент</p>} />

і всередині компонента:

javascript

function Card({ content }) {
  return <div>{content}</div>;
}

7. Приклад - компонент-контейнер

javascript

function Modal({ title, children }) {
  return (
    <div className="modal">
      <h2>{title}</h2>
      <div className="modal-content">{children}</div>
    </div>
  );
}

<Modal title="Вхід">
  <form>
    <input placeholder="Email" />
    <input type="password" placeholder="Пароль" />
    <button>Увійти</button>
  </form>
</Modal>

Тут <form>...</form> - це JSX, переданий як children.

8. Що можна передавати як JSX

Ти можеш передавати:

текст:

javascript
<Card>Привіт!</Card>
JSX-елементи:

javascript
<Card><p>Опис</p></Card>
масив елементів:

javascript
<Card>{[<li>1</li>, <li>2</li>]}</Card>
навіть інші компоненти:

javascript
<Card><Button>Купити</Button></Card>

9. React.Children API (для просунутих випадків)

Якщо тобі потрібно обробити children всередині компонента, React надає спеціальні методи:

javascript

function Wrapper({ children }) {
  return (
    <div>
      {React.Children.map(children, (child, i) => (
        <div key={i} className="child">{child}</div>
      ))}
    </div>
  );
}

React.Children.map допомагає безпечно пройтися по всіх переданих JSX-елементах, навіть якщо вони не масив.

10. Підсумок

Спосіб	Приклад	Коли використовувати
`props.children`	`<Card>...</Card>`	Контейнери, layout-компоненти
JSX як prop	`<Layout header={<Header />} />`	Декілька "слотів"
JSX у змінній	`const c = <p>...</p>`	Динамічна передача
`React.Children.map`	Обробка `children`	При складній структурі

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

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

Premium

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