Как передавать JSX внутрь компонента?

В React композиция компонентов — это фундаментальная концепция, и передача JSX является её ключевой частью. JSX — это синтаксическое расширение JavaScript, которое выглядит как HTML и компилируется в вызовы React.createElement(). Передача JSX внутрь компонента позволяет создавать абстракции и повторно использовать логику с разным содержимым.

Основные способы передачи JSX

Существует два основных подхода к передаче JSX в компонент.

1. Использование пропса children

Это самый распространённый и идиоматичный способ. Когда вы помещаете JSX между открывающим и закрывающим тегами компонента, React автоматически передаёт этот JSX в проп props.children.

// Компонент-обёртка
function Card({ children }) {
  return (
    
      {children}
    
  );
}

// Использование
function App() {
  return (
    
      Заголовок
      Это содержимое карточки, переданное как children.
    
  );
}

Внутри Card всё, что находится между тегами <Card> и </Card>, становится значением children. Это может быть простой текст, элемент, массив элементов или даже другой компонент.

2. Передача JSX через именованные пропсы

Иногда требуется передать несколько независимых фрагментов JSX или явно указать, куда они должны быть вставлены. В этом случае можно использовать обычные пропсы, значением которых является JSX.

// Компонент с несколькими слотами для контента
function Layout({ header, sidebar, mainContent }) {
  return (
    
      {header}
      {sidebar}
      {mainContent}
    
  );
}

// Использование
function App() {
  return (
    Мой сайт}
      sidebar={Меню}
      mainContent={Основная статья...}
    />
  );
}

Этот подход даёт больше ясности и контроля над структурой компонента, особенно в сложных макетах.

Практические аспекты и применение

• Компоненты-обёртки: children идеально подходит для создания контейнеров, модальных окон, карточек или провайдеров контекста, где внутреннее содержимое динамично.
• Render Props: Это продвинутый паттерн, где компонент принимает функцию (часто в пропсе с именем render), которая возвращает JSX. Это позволяет компоненту делиться своим внутренним состоянием с переданной функцией.
• Условный рендеринг: Переданный JSX можно рендерить условно внутри компонента-получателя, используя стандартные конструкции JavaScript (if, &&, тернарный оператор).

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