React — Componentes genéricos con props.children y la API Children

Temario

• props.children
• API React.Children

i. props.children

Con React, podemos crear componentes genéricos como Dialog, Sidebar, Modal, Slider,… , son básicamente aquellos componentes que representan contenido intercambiable y donde el padre no conoce su contenido (hijos).

Un ejemplo en la vida real podría ser el Sr. Cara de Papa:

El componente genérico es la Papa, y los encargados de darle forma son los Ojos, Boca, Orejas, Manos,..., ¿estás de acuerdo que la Papa no sabe qué elementos le estamos poniendo?

:: Sintaxis

Dentro del componente:

:: Ejemplo 1

Imagina que tenemos el componente Welcome, donde le vamos a mandar un texto, entonces:

Creamos el componente Welcome, donde aprovechamos la propiedad children para renderizar los elementos pasados:

Ahora en la App, importamos Welcome y le mandamos un texto:

Podemos observar en la imagen, que el componente Welcome en la propiedad children está el contenido que le hemos pasado.

Lo interesante es que podemos mandarle cualquier cosa renderizable:

Donde:

• (A) — Cadena de texto, números.
• (B) — Un elemento/componente.
• (C) — Un elemento/componente con uno o más elementos/componentes hijos.
• (D) — Múltiples elementos/componentes.

En este ejemplo, me gustaría que observaras el último (múltiples elementos):

Cuando se tiene más de un hijo tipo elemento o componente la propiedad children se convierte en un arreglo de elementos.

— Ver ejemplo completo

ii. API React.Children

React nos proporciona la API React.Children[ref] para poder manipular la estructura de datos de props.children:

:: Importamos

:: Métodos disponibles

• React.Children.map — Si children es un arreglo, será recorrido y la función será llamada para cada hijo. En caso de que children sea null o undefined, este método retornará null o undefined en vez de un arreglo. Si children es un Fragment será tratado como un hijo único y no será recorrido.
• React.Children.forEach — Es como React.Children.map, pero no va a retornar un arreglo.
• React.Children.count — Retorna el número total de componentes en children.
• React.Children.only — Verifica que children solo tenga un hijo (un elemento React) y lo retorna, caso contrario lanza un error.
• React.Children.toArray — Retorna un arreglo con keys asignadas a cada hijo, este es útil cuando queremos manipular la colección de hijos en los métodos de renderización (ordenar o segmentar)

:: Ejemplo 1

Imagina que tenemos un componente Gallery, donde le vamos a mandar “n” imágenes:

Componente Gallery:

Vamos a utilizar placekeanu[ref] para obtener imágenes random:

Vamos importar Children, y a contar los componentes que mandaron al componente:

Ahora la idea es mostrar cada 2 segundos uno a uno de los hijos. Entonces, vamos a crear un estado current para indicarle cual es el actual que debemos mostrar:

En este caso lo único que hace nuestro componente es mostrar siempre el primero…

Ahora el siguiente paso es crear un temporizador con setInterval[ref], dónde debemos validar que : current === (total — 1) entonces reinicia (0) caso contrario current incrementa uno, al ser un efecto secundario, vamos a utilizar el hook useEffect :

Estamos aprovechando el método Children.toArray, para obtener un arreglo plano con keys integradas.

Vamos a agregarle bullets ⚪/⚫, para saber en qué imagen vamos:

— Ejemplo completo

En la siguiente entrega vamos a ver React — Portales

La entrega pasada vimos React — Haciendo peticiones con Axios y Hooks

Bibliografía y links que te puede interesar…

Composición vs. herencia - React

Glosario de términos de React - React

API de Alto Nivel de React - React

Iconos e imágenes…