A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

React.Children y React.cloneElement

11/19
Recursos

Aportes 14

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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

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

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

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

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

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

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