React Academy · Урок

Основы props.children

Передавайте JSX как дочерние элементы, отображайте один или несколько дочерних элементов и управляйте их отображением по условию

«Основы props.children» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Добро пожаловать

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

Свойство дочерних элементов

Любой JSX, размещённый между открывающим и закрывающим тегами компонента, автоматически доступен как `props.children`. Так создаются компоненты-обёртки и компоненты макета.

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

// Usage
<Card><p>Hello world</p></Card>

Один или несколько дочерних элементов

Если передать один дочерний элемент, `children` будет элементом React. Если передать несколько дочерних элементов, `children` будет массивом. Поведение меняется в зависимости от количества переданных дочерних элементов.

<Card>One child</Card>          // children is a string
<Card><p>A</p><p>B</p></Card>  // children is an array

Прямое отображение дочерних элементов

Самый простой способ использовать дочерние элементы — отобразить их непосредственно внутри JSX. Родительский компонент управляет макетом и стилями, а использующий компонент — содержимым.

function Section({ title, children }) {
  return (
    <section>
      <h2>{title}</h2>
      <div className="content">{children}</div>
    </section>
  );
}

Условное отображение дочерних элементов

Перед отображением проверьте, были ли переданы дочерние элементы. Если дочерние элементы не указаны, компонент может показать запасное содержимое.

function Panel({ children }) {
  if (!children) return <p>Nothing to show</p>;
  return <div className="panel">{children}</div>;
}

Дочерние элементы как функция рендеринга

Дочерние элементы также могут быть **функцией** — это шаблон функции рендеринга. Родительский компонент вызывает её с данными, а использующий компонент управляет отображением. Это более старый подход — сегодня его часто заменяют пользовательские хуки.

function DataLoader({ children }) {
  const data = useFetchData();
  return children(data); // consumer receives data
}

<DataLoader>{data => <ul>{data.map(...)}</ul>}</DataLoader>

Передача дочерних элементов через свойство

Дочерние элементы необязательно передавать через специальный слот `{children}`. JSX можно передать через свойство с любым именем. Это основа именованных слотов.

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

Дочерние элементы по умолчанию

Дочерние элементы по умолчанию можно задать с помощью синтаксиса параметров JavaScript по умолчанию при деструктуризации. Если родительский компонент ничего не передаст, будет показано содержимое по умолчанию.

function Button({ children = 'Click me' }) {
  return <button>{children}</button>;
}

Фрагменты и несколько дочерних элементов

Чтобы вернуть несколько элементов без обёртки `div`, используйте `React.Fragment` или сокращённую запись `<>...`. Это удобно в компонентах макета, где дополнительный узел DOM мог бы нарушить CSS.

function Row({ children }) {
  return <>{children}</>;
}

TypeScript: типизация дочерних элементов

В TypeScript используйте `React.ReactNode` для типизации дочерних элементов — этот тип принимает элементы, строки, числа, массивы, null и undefined.

interface Props {
  children: React.ReactNode;
}

function Box({ children }: Props) {
  return <div>{children}</div>;
}

Быстрая проверка

Какой тип имеет props.children, если передать несколько элементов JSX между тегами компонента?

Повторение

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

Следующий урок: **Вспомогательные средства React.Children** — Вы будете использовать React.Children.map, count и toArray, чтобы безопасно обрабатывать дочерние элементы независимо от их типа и количества.

Часто задаваемые вопросы

Урок «Основы props.children» бесплатный?

Да — полный текст урока «Основы props.children» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Основы props.children»?

Передавайте JSX как дочерние элементы, отображайте один или несколько дочерних элементов и управляйте их отображением по условию Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Основы props.children»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к React Academy