React Academy · Lección

Clonación e inyección de props con cloneElement

Utilice React.cloneElement para pasar props ocultas del componente padre a los componentes hijos.

Clonación e inyección de props con cloneElement es una lección gratuita de React Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Bienvenida

En esta lección utilizará React.cloneElement para clonar un elemento child e inyectar props adicionales desde el padre, sin que el child tenga que conocerlas.

¿Qué es cloneElement?

`React.cloneElement(element, props, ...children)` crea un elemento de React nuevo a partir de uno existente y combina las props nuevas con las props originales. Se conserva el tipo del elemento original.

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

¿Por qué utilizar cloneElement?

Un componente padre puede inyectar comportamiento, como un estado activo o controladores de eventos, en sus children sin que estos lo sepan. Esto se utiliza en sistemas de pestañas, acordeones y grupos de formularios.

Ejemplo de barra de pestañas

Un componente Tabs puede clonar cada child Tab e inyectar automáticamente las props `isActive` y `onClick`, de modo que el consumidor no tenga que conectarlas manualmente.

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>
  );
}

Reglas de combinación de props

cloneElement combina las props nuevas **por encima** de las props originales. Si el elemento original ya tiene una prop con la misma clave, prevalece el valor nuevo. style y className se sobrescriben, no se combinan, a menos que lo gestione manualmente.

Combinar controladores de eventos

Para combinar controladores de eventos en lugar de sobrescribirlos, componga manualmente los callbacks antes de pasarlos a cloneElement.

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

Sustituir children

El tercer argumento de `cloneElement` sustituye los children del elemento. Pase contenido nuevo para sobrescribir por completo los children originales.

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

Comprobar el tipo de elemento antes de clonarlo

Antes de clonar, compruebe que el child sea un elemento de React válido y, opcionalmente, compruebe su tipo para evitar clonar children que no sean elementos, como texto, números o null.

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

cloneElement frente a Context

cloneElement es frágil porque requiere conocer la estructura del child. Por lo general, se prefiere Context para pasar datos implícitos a través de muchos niveles. Utilice cloneElement únicamente para inyectar props entre un padre y sus children directos.

Alternativa moderna: render props y hooks

En muchos casos en los que históricamente se utilizaba cloneElement, un custom hook o una render prop resulta más claro. Considere utilizar cloneElement cuando realmente controle tanto el padre como los children directos.

Comprobación rápida

¿Qué ocurre con una prop que existe tanto en el elemento original como en el objeto de props pasado a React.cloneElement?

Repaso

React.cloneElement clona un elemento e inyecta props nuevas. Utilícelo para la inyección implícita de props del padre al child en componentes compuestos. Prefiera Context o render props cuando la jerarquía sea más profunda.

Curso completado

¡Enhorabuena! Ha completado **React Children API & Slots Pattern**. Ahora domina props.children, las utilidades de React.Children, las props de slots con nombre y cloneElement para crear componentes de diseño flexibles.

Preguntas frecuentes

¿La lección «Clonación e inyección de props con cloneElement» es gratis?

Sí — el texto completo de «Clonación e inyección de props con cloneElement» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Clonación e inyección de props con cloneElement»?

Utilice React.cloneElement para pasar props ocultas del componente padre a los componentes hijos. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Clonación e inyección de props con cloneElement»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Fundamentos de props.children
Utilidades de React.Children
Slots con nombre mediante props de objeto
Clonación e inyección de props con cloneElement

← Volver a React Academy