No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

5D
2H
27M
25S

React.Children y React.cloneElement

11/19
Recursos

Aportes 31

Preguntas 11

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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.

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.

馃梽锔 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
};

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

P贸nganle un:

.TodoSearch__container {
   transition: 1s;
}

Y ver谩n que bonito

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

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.
React.cloneElement

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!

馃く despacio despacio cerebrito.
Wow, esto s铆 que me vol贸 la cabeza.

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

Los 鈥淩eact 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.

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

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 鈥渓oading鈥
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;

En mi app, le estaba enviando el estado 鈥渄arkMode鈥 a CADA componente para asignar estilos oscuros鈥 esta funcionalidad me arregla la vida!

Esto es lo que tenia tiempo queriendo saber como se hacia, pense no era posible algo asi, excelente clase.

Un uso interesante puede ser si se necesita que todos los componentes dentro de un container tengan cierto color o propiedad visual, y que si est谩n fuera de ese container no tengan ese color. O incluso poder definir ese color dependiendo del container. Se aplica el clone element a todos los hijos del container y se le a帽ade la propiedad deseada.

Me vol贸 la cabeza el uso de est谩s herramientas!

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

podria ser para evitar el DRY, pero no lo se

<h2 className="TodoCounter">{!loading && `Has completado ${completedTodos} de  ${totalTodos}`} TODOs</h2>

驴Qu茅 es lo que me encanta de estos cursos? que JuanDC nos ense帽a muchas formas de hacer lo mismo y eso es genial porque tienes varias opciones para solucionar un problema, gracias JuanDC!!!

BEM (Block Element Modifier) es un estandar para crear nombres de clases que sigue la estructura:

block__element--modifier

Por lo que la clase para el texto en TodoCounter podr铆a quedar algo as铆:

.TodoCounter__text--disabled {
  opacity: 25%;
}

siempre que intentaba poner children en un componente visual studio me importaba Children. Ahora por fin se para que es.

Yo lo hab铆a pensado algo as铆, para que lo mostrara seg煤n hab铆a Todos o no

<TodoHeader>
				<Title>Todo tasks</Title>
				{totalTodos > 0 && 
						<TodoSearch 
							search={searchValue} 
							setSearch={setSearch} />
				}
			</TodoHeader>

Resumen

  • React.cloneElement sirve para clonar un componente y agregarle propiedades.
  • React.Children.toArray al enviarle la prop children siempre nos devuelve un arreglo con nuestros elementos o componentes de children.

jejjejejej ese error del minuto 12:05 se solucionaba dandole exactamente el index del children


  { React.cloneElement(children[0], {loading}) }
  { React.cloneElement(children[1], {loading}) }

Inquietud

Buenas tardes a todos, tengo una inquietud porque en este curso no se esta dejando Archivos de la clase?, es muy ganador encontrar los archivos para un mejor entendimiento. O en su caso un repositorio de git de cada clase. Espero una repuesta agradezco si es del profesor @JUAN DAVID CASTRO

Una vez use React.Children y React.cloneElement para crear un componente de formulario. En el que pasandole ciertas propiedades terminada pasandole los valores a todos sus hijos (inputs)

Me parece que est谩 s煤per pr谩ctico para agregar soporte de idiomas! Dejo un ejemplo de c贸mo lo distribuyo en mi header, aunque no pude usar Children 馃槄 馃憞

Ejemplo: https://juliantoro91.github.io/TAPP-react-todo-app/

En App.js

    <TodoHeader
        loading={loading}
        languageSupport={languageSupport}
        languageShifter={
          <LanguageShifter
            saveLanguage={saveLanguage} />}
        todoCounter={
          <TodoCounter
            tasksState={tasksState}
          />}
      />

En el TodoCounter del header

<div className="header-todo-counter">{ react.cloneElement(todoCounter, { loading, languageSupport }) }</div>

Repositorio Github: https://github.com/juliantoro91/TAPP-react-todo-app

Me parece muy 煤til para hacer animaci贸n con clases de CSS, simplifica mucho la l贸gica que hay que implementar .-.