React Academy · Урок

Клонирование и добавление props с помощью cloneElement

Используйте React.cloneElement, чтобы передавать скрытые props от родительских компонентов дочерним

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

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

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

Что такое cloneElement

`React.cloneElement(element, props, ...children)` создаёт новый элемент React на основе существующего, объединяя новые свойства с исходными. Тип исходного элемента сохраняется.

const clone = React.cloneElement(child, { active: true });

Зачем нужен cloneElement

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

Пример панели вкладок

Компонент вкладок может клонировать каждый дочерний элемент вкладки и автоматически добавлять ему свойства `isActive` и `onClick`, поэтому использующему компоненту не нужно связывать их вручную.

function Tabs({ children, activeIndex, onChange }) {
  return (
    <div className="tabs">
      {React.Children.map(children, (child, i) =>
        React.cloneElement(child, {
          isActive: i === activeIndex,
          onClick: () => onChange(i),
        })
      )}
    </div>
  );
}

Правила объединения свойств

cloneElement объединяет новые свойства **поверх** исходных. Если в исходном элементе уже есть свойство с тем же ключом, используется новое значение. Свойства стиля и className перезаписываются, а не объединяются, если не обработать это вручную.

Объединение обработчиков событий

Чтобы объединить обработчики событий, а не перезаписать их, вручную составьте функции обратного вызова перед передачей их в cloneElement.

React.cloneElement(child, {
  onClick: (e) => {
    child.props.onClick?.(e); // original handler
    handleClick(e);           // injected handler
  },
})

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

Третий аргумент `cloneElement` заменяет дочерние элементы элемента. Передайте новое содержимое, чтобы полностью переопределить исходные дочерние элементы.

// Replace children with wrapped version
React.cloneElement(child, {}, <strong>{child.props.children}</strong>)

Проверка типа элемента перед клонированием

Перед клонированием убедитесь, что дочерний элемент является допустимым элементом React, и при необходимости проверьте его тип, чтобы не клонировать дочерние элементы, не являющиеся элементами: текст, числа или null.

if (React.isValidElement(child)) {
  return React.cloneElement(child, extraProps);
}
return child;

cloneElement и контекст

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

Современная альтернатива: функции рендеринга и хуки

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

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

Что происходит со свойством, которое существует и в исходном элементе, и в объекте свойств, переданном в React.cloneElement?

Повторение

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

Курс завершён

Поздравляем! Вы завершили курс **API дочерних элементов React и шаблон слотов**. Теперь Вы умеете работать с props.children, вспомогательными средствами React.Children, свойствами именованных слотов и cloneElement для создания гибких компонентов макета.

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

Урок «Клонирование и добавление props с помощью cloneElement» бесплатный?

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

Чему я научусь в уроке «Клонирование и добавление props с помощью cloneElement»?

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

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

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

Сколько времени занимает урок «Клонирование и добавление props с помощью cloneElement»?

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

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

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

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

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

← Назад к React Academy