Uso de React.Children y React.CloneElement para Composición Avanzada

Curso de React.js: Patrones de Render y Composición

Contenido del curso

Introducción

Composición de componentes

Render props

8
Render Props y Render Functions en React: Patrones Avanzados
06:50 min
9
Render Props en React: Mejora de Componentes con Ejemplo de To-Do List
13:29 min
10
Validación y optimización de Render Props y Render Functions en React
12:40 min
11
Uso de React.Children y React.CloneElement para Composición Avanzada
Viendo ahora

High Order Components

React Hooks

Próximos pasos

19
Patrones de Render en React.js: Principios y Técnicas Avanzadas
01:44 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:05

Uso de React.Children y React.CloneElement para Composición Avanzada

Curso de React.js: Patrones de Render y Composición

Clase 11 de 19

Clase 11 / 19

Comentarios (54)54 comentarios

Juan Pablo Jimenez

Hace 5 años

Max Andy Diaz Neyra

Hace 5 años

Cristhian Camilo Delgado Pazos

Reinaldo Mendoza

Mars Gotta

Xavier Flores

Fernando Quinteros Gutierrez

Hace 5 años

Derek Samuel Paúl Peña

Hace 5 años

Aldo Hernández

Hace 4 años

Derek Samuel Paúl Peña

Hace 4 años

Pedro Moreno

Hace 5 años

José Luis Encastin Flores

Felipe Quiceno Gomez

Alejo Vera

Christian Boffill

Johangly Sucre

Fernando Molano Castrillón

Gualberto Montiel

Bryan Figueroa

Kevin Fiorentino

Juan David Díaz Pastrana

Hace 5 años

Juan Castro

Profesor

Hace 5 años

Jesus Manuel Hernandez Diaz

Hace 4 años

Carlos Zabala Roqueme

Hace 5 años

Juan Castro

Profesor

Hace 5 años

Christian Rivera

Hace 4 años

Sergio Fernandez

Hace 4 años

Nicolas Forero Quevedo

Hace 4 años

Edwin Alexander Torrez Villegas

Hace 4 años

Juan Castro

Profesor

Hace 4 años

Paul Lazcano

Hace 5 años

Juan Castro

Profesor

Hace 5 años

Remix Zapata

Hace 3 años

Recursos

¿Cómo usar React.Children y React.CloneElement para mejorar la composición de componentes?

La capacidad de componer y reutilizar componentes es una de las grandes ventajas de React. Sin embargo, en ocasiones necesitamos pasar propiedades especiales a los componentes hijos de un contenedor. Aquí es donde React.Children y React.CloneElement entran en acción, permitiéndonos manipular los props de los componentes hijos de manera eficiente. A continuación, te explicamos cómo usarlos para mejorar la comunicación entre componentes.

¿Qué es React.Children?

React.Children es una utilidad que proporciona una serie de métodos para manejar los elementos hijos en React. Una de sus funciones más útiles es React.Children.toArray, que convierte los elementos hijos en un array, lo cual es crucial cuando queremos iterar sobre ellos, sin importar si hay uno o varios, o incluso ninguno.

¿Cómo funciona React.CloneElement?

React.CloneElement permite clonar un elemento existente, y al mismo tiempo pasar nuevas propiedades al clon creado. Esto es invaluable cuando necesitamos asegurar que ciertos componentes hijos reciban propiedades específicas desde el componente padre sin necesidad de pasar esas props manualmente.

Por ejemplo, en clase, al clonar los elementos hijos del componente TodoHeader, pudimos pasar la propiedad loading automáticamente a todos los hijos. Esto simplifica la administración y modificación de los componentes cuando cambia el estado de carga.

Aplicando React.Children y React.CloneElement en tu proyecto

Convirtiendo a Array: Utiliza React.Children.toArray para transformar cualquier cantidad de hijos en un array. Esto facilita el manejo y la iteración de los elementos.
```
const childrenArray = React.Children.toArray(props.children);
```
Clonando elementos: Usa React.CloneElement dentro de un .map() para clonar cada elemento y pasarle nuevas propiedades.
```
childrenArray.map(child =>
  React.cloneElement(child, { loading: props.loading })
);
```
Implementación: Asegúrate de que el componente hijo puede manejar la nueva propiedad, por ejemplo, ajustando el estado de un input o agregando una clase CSS.

Ejemplo práctico: Habilitar/deshabilitar un input

En un componente como TodoSearch:

Propiedad loading: Pasa loading desde el componente padre:
```
<TodoSearch loading={loading} />
```
Condición disabled: Dentro de TodoSearch, utiliza loading para condicionar el estado:
```
<input type="text" disabled={loading} />
```

CSS dinámico para estados de carga

Para mejorar la experiencia visual, reactivos a los cambios de estado, se puede aplicar CSS condicional:

.todo-input:disabled {
  opacity: 0.25;
}

¿Por qué usar estas herramientas?

Estas herramientas pueden no ser las más comunes, pero son particularmente útiles para:

Heredar propiedades automáticamente: Especialmente cuando trabajas con componentes complejos y no quieres propagar manualmente props a varios niveles.
Facilitar la composición de componentes: Permitiendo ajustes globales sin modificar cada componente manualmente.
Flexibilidad y reutilización: Mejora la escalabilidad de tu aplicación, garantizando que los componentes reciben las propiedades necesarias automáticamente.

React es un mundo de posibilidades para optimizar tu flujo de trabajo. Continúa explorando estas herramientas, y descubre cómo pueden simplificar la gestión de estados y estilos en tus proyectos. Investiga, experimenta e integra estas funcionalidades en tus aplicaciones para mantener un código limpio, eficiente y escalable. Además, explora la documentación oficial de React para afinar tus habilidades y seguir mejorando como desarrollador.

11.-React.Children y React.cloneElement

-- Para poder pasar propiedades especiales a los componentes hijos de nuestros componentes contenedores cuando hacemos composición.

-- Cuando enviamos más de un componente o elemento hijo al que use CloneElement, la app deja de funcionar y suelta un error. CloneElement necesita recibir un elemento de react, cuando children es más de un componente entonces tenemos un array, para esto existe React.Children que nos ayuda a que CloneElement entienda sin importar cuantos elementos vienen en el props.children.

function TodoHeader({ children, loading }) {
  //No importa si viene un elemento, o dos o null siempre nos devuelve un array

  return (
    <header>
      {React.Children.toArray(children).map((child) =>
        React.cloneElement(child, { loading: loading })
      )}
    </header> //Por cada child vamos a llamar a clone element.
  ); //Crear elemento a partir de otro (elemento, objeto con las props que queramos que tenga)
}

No son las herramientas más populares pero pueden ser muy útiles cuando queremos compartir una o ciertas props a los componentes hijos de un componente contenedor.

Gracias por tus resumenes, me ahorran tiempo que puedo utilizar en aprender, eres un crack.

Imagino un componente que se renderiza en diferentes partes pero en alguna de ellas toma algunas propiedades diferentes ya sea estilos o textos. se podría en ciertas partes usar React.cloneElemet para no tener que modificar otros componentes padres del aplicativo.

En este contexto que mencionas si me hace sentido, en la forma en la que lo uso el profesor parece muy forzado

Muy buena explicación! Solo un apunte, actualmente cloneElement está desaconsejado por React y en su documentación te muestra diferentes alternativas: https://beta.reactjs.org/reference/react/cloneElement Un saludo!

buen aporte!

🗄️ React.Children y React.cloneElement

Apuntes

React.cloneElement

Con esta característica de React podemos crear elementos de Nodos React
Cabe aclarar que esta funciona con un unico nodo, en caso de aplicarla en un conjunto de los mismos podemos ayudarnos de React.Children

React.Children

Nos permite manipular la prop children entre uno de sus usos podemos volver un conjunto de nodos react a un array

Me pareció sencillo trabajar así también jeje, no se qué opinen:

import React from "react";

function TodoHeader({ children, loading }) {
  return (
    <header>
      {
        [...children].map((child, index) => (
          React.cloneElement(child, { loading, key: index })
        ))
      }
    </header>
  );
}

export {
  TodoHeader
};

si pero igual deberías de ocupar React.Children.toArray, debido a que si por alguna razón recibes children en null o con un solo objeto simple, vas a tener un error en la destructuración del arreglo

@aldohmolina, tienes razón, aunque para esa parte también podríamos verificar con este validación:

children && children.length && Array.isArray(children)

este código se puede hacer de varias formas y esto es algo que me encanta de JS, nunca hay una sola opción de trabajo.

 {React.Children.toArray(children).map((child) => React.cloneElement(child, { loading }))}

Pónganle un:

.TodoSearch__container {
   transition: 1s;
}

Y verán que bonito

¡Gracias por el tip!

Se ve muy bacana esa transition gracias

Recomiendo mucho el link que adjunto Juan de Medium! Buenísimo, me lo dejó super claro

React.Children tiene varias utilidades para trabajar con props.children. Para profundizar en que hacen les dejo lo siguiente:

React.Children.map( children, function() )

React.Children.forEach( children, function() )

React.Children.count( children )

React.Children.only( children )

React.Children.toArray( children )

Con respecto a React.cloneElement( children, { props } ) me sirve para cuando tengo varios hijos dentro de un componente y casualmente todos ellos usan las mismas props que el padre además de otras propias. Por tanto para evitar escribirle las mismas props a cada hijo, las clonamos del padre y con métodos de array las repartimos entre los hijos.

Muchas gracias! :D

🤯 despacio despacio cerebrito. Wow, esto sí que me voló la cabeza.

Los "React Children" se usan principalmente para dar estructura y organizar el contenido dentro de un componente React. Al utilizar componentes en React, se puede dividir el contenido en diferentes partes y organizarlo de manera más clara y sencilla. Además, esto permite reutilizar código de manera más eficiente, ya que puedes crear componentes genéricos que pueden ser utilizados en diferentes partes de tu aplicación.

React.cloneElement es una función de React que se utiliza para clonar un elemento y pasarle nuevas propiedades. Esto puede ser útil en casos donde quieras crear una copia de un componente existente y modificar algunas de sus propiedades, pero sin tener que crear un nuevo componente desde cero. Por ejemplo, si tienes un componente que muestra un botón y quieres cambiar el color del botón en una parte de tu aplicación, puedes utilizar React.cloneElement para clonar el componente del botón y pasarle una nueva propiedad de color.

no se ustedes, pero me parece innecesario complicarme la vida xd

podria ser para evitar el DRY, pero no lo se

Está bueno conocer este tipo de herramientas que no son tan utilizadas, pero existen y uno puede toparse con ellas en un proyecto laboral.

Me ha parecido muy jugoso el contenido de esta clase, pero tengo una duda tremenda. Soy usuario de typescript y me quedo con la inquietud de cómo tipar mis props para usar React.cloneElement ¿Debería ponerlos como prop opcionales pese a que no lo sean o no debería usarlo en el caso en que las props no sean opcionales?

Muy pronto deberíamos estar publicando diferentes cursos de React.js con TypeScript

Tengo la misma duda, excelente pregunta.

Si tengo la necesidad de repetir (n) veces un componente, la forma que encontré sería hacer esto:

const n = 30; //Veces a repetir
{[...Array(n)].map((e, i) => (
        <ExampleComponent key={i} />
      ))}

Ahora conociendo React Clone y React Children seria mejor opción para generar varias veces el mismo componente?

Está muy bien tu solución :clap:

Para los que estén usando Typescript y sufran un poco con los tipos les comparto lo que hice.

Children en el componente de Header lo difiní como un array de ReactElement (Es mejor usar ReactElement ya que es más específico que ReactNode).
A los componentes del searchbar y del título les puse como nuleable la propiedad de "loading"

interface TodoHeaderType {
    children : ReactElement[],
    loading : boolean,
}

function TodoHeader({children, loading} : TodoHeaderType) {
    return (
        <header>
            {
                React.Children
                    .map(children, child => React.cloneElement(child, {loading}))
            }
        </header>
    );
}

export default TodoHeader;

Para los que quieran una animación de carga que va acorde al proyecto a mi parecer les dejo un fade en css:

.TodoCounter--loading {
  animation: fade 1s infinite;
}

/* infinite fade animation */
@keyframes fade {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.5;
  }
}

React.Children y React.cloneElement , me parecieron bastante utiles para pasar props entre varios hijos y contenedores, con eso no tener que estar pasando todos los props a cada hijo directamente

Solo para aclarar una duda, esto se puede llamar como una ¿Herencia?, es que asi lo veo, no sé si estoy en lo correcto.

De aquí sale la famosa discusión de herencia vs. composición. React desde los Hooks está tratando de irse más por el lado de la composición. :D

¿En qué casos se usaría éste método? Si veo que tiene poder pero no entiendo por qué lo haría de ésta manera en lugar de simplemente pasar props 🧐

Yep, se puede resolver con props. En resumen este método sirve para evitar que debamos enviar las mismas props a los mismos componentes una y otra vez, sino que sea todo automático. Se empieza a notar la diferencia cuando necesitas enviarle muchas props o una misma prop con demasiada información a muchos componentes al mismo tiempo. :D

Me funcionó sin el paso extra de React.Children.toArray(children)

Introducción

Patrones de Render en ReactJS: Mejora tu Código y Organización

Principios de Diseño de React: Filosofía y Aplicación Práctica

Composición de componentes

Composición de Componentes en React: Principios y Prácticas

Composición y Colocación de Estado en React con Patrones de Renderización

Optimización de Composición de Componentes en React

Composición Saludable con React Context en Aplicaciones React

Eliminación de React Context mediante Custom Hooks en React

Render props

Render Props y Render Functions en React: Patrones Avanzados

Render Props en React: Mejora de Componentes con Ejemplo de To-Do List

Validación y optimización de Render Props y Render Functions en React

Uso de React.Children y React.CloneElement para Composición Avanzada

High Order Components

Funciones y Componentes de Orden Superior en JavaScript y React

Práctica de High-Order Components en React

Sincronización de Cambios en React con StorageListener

Sincronización de Estados en React con Local Storage

Sincronización y validación de to-do list con local storage

React Hooks

Comparativa de Patrones: Render Props vs React Hooks

Conversión de HighOrder Components a Custom Hooks en ReactJS

Próximos pasos

Patrones de Render en React.js: Principios y Técnicas Avanzadas

Uso de React.Children y React.CloneElement para Composición Avanzada

Progreso del curso

Introducción

Composición de componentes

Render props

High Order Components

React Hooks

Próximos pasos

Recursos

Recursos