React Academy · Урок

Именованные слоты через свойства объекта

Реализуйте слоты заголовка, тела и подвала, передавая JSX через именованные свойства

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

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

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

Ограничение дочерних элементов

Одного свойства `children` достаточно для одной области. Когда компоненту нужны несколько независимых областей содержимого, например карточке нужны заголовок и подвал, чистым решением становятся именованные свойства, содержащие JSX.

Слоты через именованные свойства

Определите свойство для каждого слота в интерфейсе компонента. Родительский компонент передаёт JSX в каждое свойство, а компонент отображает каждый слот в правильном месте.

function Card({ header, body, footer }) {
  return (
    <div className="card">
      <div className="card-header">{header}</div>
      <div className="card-body">{body}</div>
      <div className="card-footer">{footer}</div>
    </div>
  );
}

// Usage
<Card
  header={<h2>Title</h2>}
  body={<p>Content here</p>}
  footer={<button>OK</button>}
/>

Необязательные слоты

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

function Card({ header, children, footer }) {
  return (
    <div>
      {header && <div className="header">{header}</div>}
      <div className="body">{children}</div>
      {footer && <div className="footer">{footer}</div>}
    </div>
  );
}

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

Используйте `children` для основной области содержимого, а именованные свойства — для второстепенных областей. Это соответствует принципу: наиболее распространённый сценарий должен быть самым удобным.

<Dialog
  title="Confirm"
  actions={<><button>Cancel</button><button>OK</button></>}
>
  <p>Are you sure?</p>  {/* children = primary slot */}
</Dialog>

TypeScript: типизация именованных слотов

Типизируйте свойства именованных слотов как `React.ReactNode`, чтобы принимать любое содержимое JSX.

interface CardProps {
  header?: React.ReactNode;
  children: React.ReactNode;
  footer?: React.ReactNode;
}

Именованные слоты и составные компоненты

Именованные свойства просты и понятны. Составные компоненты, например ``, удобнее для сложных семейств компонентов, но требуют дополнительной настройки с помощью контекста. Начните с именованных свойств и при необходимости перейдите к составным компонентам.

Передача компонентов в качестве слотов

Слот также можно типизировать как компонент React, а не как JSX. Родительский компонент передаёт ссылку на компонент, а макет отображает его. Это даёт макету контроль над тем, когда и сколько раз отображать слот.

function Timeline({ renderItem, items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

<Timeline
  items={data}
  renderItem={item => <EventCard event={item} />}
/>

Композиция макета с именованными слотами

Компоненты макета страницы активно используют именованные слоты. Компонент-каркас страницы со слотами `sidebar`, `toolbar` и `content` позволяет разным страницам использовать один и тот же каркас, но полностью менять содержимое каждой области.

Документирование именованных слотов

Именованные слоты документируют сами себя через интерфейсы TypeScript или PropTypes. Использующие компоненты могут точно видеть, какие слоты доступны и какие из них необязательны, поэтому внешняя документация требуется реже.

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

Какой тип TypeScript следует использовать для свойства именованного слота, принимающего любой JSX?

Повторение

Свойства именованных слотов делают компоненты макета гибкими и понятными без дополнительной документации. Используйте дочерние элементы для основной области, именованные свойства — для второстепенных областей, а типизируйте их как React.ReactNode.

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

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

Урок «Именованные слоты через свойства объекта» бесплатный?

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

Чему я научусь в уроке «Именованные слоты через свойства объекта»?

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

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

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

Сколько времени занимает урок «Именованные слоты через свойства объекта»?

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

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

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

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

Основы props.children
Утилиты React.Children
Именованные слоты через свойства объекта
Клонирование и добавление props с помощью cloneElement

← Назад к React Academy