Children

const mappedChildren = Children.map(children, child =>
  <div className="Row">
    {child}
  </div>
);

• Uso
  • Transformar children
  • Corriendo un código para cada child
  • Contar children
  • Convertir children a un array
• Alternativas
  • Exponer varios componentes
  • Aceptar un array de objetos como prop
  • Llamar a un accesorio de representación para personalizar la representación
• Referencia
  • Children.count(children)
  • Children.forEach(children, fn, thisArg?)
  • Children.map(children, fn, thisArg?)
  • Children.only(children)
  • Children.toArray(children)
• Solución de problemas
  • Paso un componente personalizado, pero los métodos Children y no muestran su resultado de renderizado

Uso

Transformar children

Para transformar el JSX de tu componente que recibe como el children prop, llama Children.map:

import { Children } from 'react';

function RowList({ children }) {
  return (
    <div className="RowList">
      {Children.map(children, child =>
        <div className="Row">
          {child}
        </div>
      )}
    </div>
  );
}

En el ejemplo anterior, el RowList envuelve cada child que recibe un <div className="Row> contenedor. Por ejemplo, digamos que el componente padre pasa tres etiquetas <p> como el children prop a RowList:

<RowList>
  <p>Este es el primer elemento.</p>
  <p>Este es el segundo elemento.</p>
  <p>Este es el tercer elemento.</p>
</RowList>

Después, con la implementación anterior del RowList, el resultado final renderizado se verá así:

<div className="RowList">
  <div className="Row">
    <p>Este es el primer elemento.</p>
  </div>
  <div className="Row">
    <p>Este es el segundo elemento.</p>
  </div>
  <div className="Row">
    <p>Este es el tercer elemento.</p>
  </div>
</div>

Children.map es similar a la transformación de arrays con map(). La diferencia es que el children se considera la estructura de datos opaque. Esto significa que incluso si a veces es un array, no debe asumir que es un array o cualquier otro tipo de datos en particular. Esta es la razón por la que debes usar Children.map si necesitas transformarlo.

import RowList from './RowList.js';

export default function App() {
  return (
    <RowList>
      <p>Este es el primer elemento.</p>
      <MoreRows />
    </RowList>
  );
}

function MoreRows() {
  return (
    <>
      <p>Este es el segundo elemento.</p>
      <p>Este es el tercer elemento.</p>
    </>
  );
}

Corriendo un código para cada child

Llama Children.forEach para iterar sobre cada child en la estructura de datos children. No devuelve ningún valor y es similar al método array forEach. Puede usarlo para ejecutar una lógica personalizada como construir su propio array.

Contar children

Llama Children.count(children) para calcular el número de children.

Convertir children a un array

Llama Children.toArray(children) para convertir la estructura de datos children en un array de JavaScript regular. Esto le permite manipular el array con métodos de array integrados como filter, sort, ó reverse.

Alternativas

import { Children } from 'react';

Exponer varios componentes

Manipular children con los métodos Children a menudo conduce a un código frágil. Cuando tú pasas un children a un componente en JSX, por lo general, no espera que el componente manipule o transforme al children individualmente.

Cuando pueda, trate de evitar el uso de los métodos Children. Por ejemplo, si quieres que cada child de RowList este envuelto en <div className="Row">, exporte un componente Row y envuelve manualmente cada Row dentro de él de esta manera:

A diferencia de usar Children.map, este enfoque no envuelve a todos los child automáticamente. Sin embargo, este enfoque tiene un beneficio significativo en comparación con el ejemplo anterior con Children.map porque funciona incluso si sigues extrayendo más componentes. Por ejemplo, todavía funciona si extrae su propio componente MoreRows:

Esto no funcionaría con Children.map porque “vería” <MoreRows /> como un solo child (y un solo row).

Aceptar un array de objetos como prop

También puede pasar explícitamente un array como prop. Por ejemplo, este RowList acepta el array rows como un prop :

Ya que rows es un array regular de JavaScript, el componente RowList puede usar métodos de matriz incorporados como map en el.

Este patrón es especialmente útil cuando desea poder pasar más información como datos estructurados junto con un children. En el siguiente ejemplo, el componente TabSwitcher recibe un array de objetos tabs como prop:

A diferencia de pasar el children como JSX, este enfoque le permite asociar algunos datos adicionales como header con cada elemento. Porque estás trabajando con las tabs directamente, y es una matriz, no necesita los métodos Children.

Llamar a un accesorio de representación para personalizar la representación

En lugar de producir JSX para cada artículo, también puede pasar una función que devuelve JSX, y llamar a esa función cuando sea necesario. En este ejemplo, el componente App pasa una función renderContent al componente TabSwitcher. El componente TabSwitcher llama renderContent solo para el tab seleccionado:

Un prop como renderContent se llama como render prop. Porque es un prop que especifica cómo representar una parte de la interfaz de usuario. Sin embargo, no tiene nada de especial: es un prop regular que resulta ser una función.

Render props son funciones, por lo que les puedes pasar información. Por ejemplo, este componente RowList pasa el id y el index por cada fila del render prop renderRow, que usa index para resaltar las filas pares:

Este es otro ejemplo de cómo los componentes padre e hijo pueden cooperar sin manipular a los children.

Referencia

Children.count(children)

Llama Children.count(children) para contar el numero children en la estructura de datos children.

import { Children } from 'react';

function RowList({ children }) {
  return (
    <>
      <h1>Filas totales: {Children.count(children)}</h1>
      ...
    </>
  );
}

Ver más ejemplos anteriores.

Parámetros

• children: el valor de children prop recibido por tú componente.

Regresa

El numero de nodos de estos children.

Advertencias

• Nodos vacíos (null, undefined, y Booleans), strings, numbers, y React elements cuentan como nodos individuales. Arrays no cuentan como arreglos individuales, pero sus children si. El recorrido no va más profundo que React elements: ellos no se renderizan, y sus children no son afectados. Fragments no son afectados.

Children.forEach(children, fn, thisArg?)

Llamar Children.forEach(children, fn, thisArg?) para correr algún código por cada child en la estructura de datos children.

import { Children } from 'react';

function SeparatorList({ children }) {
  const result = [];
  Children.forEach(children, (child, index) => {
    result.push(child);
    result.push(<hr key={index} />);
  });
  // ...

Ver más ejemplos anteriores.

Parámetros

• children: El valor de children prop recibido por tú componente.
• fn: La función que desea ejecutar para cada child, similar al callback del método array forEach. Se llamará con el child como primer argumento y su index como segundo argumento. el index empieza en 0 y se incrementa por cada llamada.
• opcional thisArg: El valor this con el que se debe llamar a la función fn. Si se omite, es undefined.

Regresa

Children.forEach regresa undefined.

Advertencias

• Nodos vacíos (null, undefined, y Booleans), strings, numbers, y React elements cuentan como nodos individuales. Arrays no cuentan como arreglos individuales, pero sus children si. El recorrido no va más profundo que React elements: ellos no se renderizan, y sus children no son afectados. Fragments no son afectados.

Children.map(children, fn, thisArg?)

Llamar Children.map(children, fn, thisArg?) para mapear o transformar cada child en la estructura de datos children.

import { Children } from 'react';

function RowList({ children }) {
  return (
    <div className="RowList">
      {Children.map(children, child =>
        <div className="Row">
          {child}
        </div>
      )}
    </div>
  );
}

Ver más ejemplos anteriores.

Parámetros

• children: El valor de children prop recibido por tú componente.
• fn: La función de mapeo, similar al callback del método array map. Se llamará con el child como primer argumento y su index como segundo argumento. el index empieza en 0 y se incrementa por cada llamada. Necesitas regresar un React node de esta función. Esto puede ser un nodo vacío (null, undefined, o un Boolean), un string, un number, un React element, o un array de otros React nodes.
• opcional thisArg: El valor this con el que se debe llamar a la función fn. Si se omite, es undefined.

Regresa

Si children es null o undefined, regresa el mismo valor.

De lo contrario, devuelve un array plano que consta de los nodos que ha devuelto de la función fn. devuelta contendrá todos los nodos que devolvió excepto por null y undefined.

Advertencias

• Nodos vacíos (null, undefined, y Booleans), strings, numbers, y React elements cuentan como nodos individuales. Arrays no cuentan como arreglos individuales, pero sus children si. El recorrido no va más profundo que React elements: ellos no se renderizan, y sus children no son afectados. Fragments no son afectados.

• Si devuelve un elemento o un array de elementos con keys de fn, las keys de los elementos devueltos se combinará automáticamente con la clave del elemento original correspondiente de children. Cuando devuelves múltiples elementos de fn en una array, sus keys solo necesitan ser únicas localmente entre sí.

Children.only(children)

Llamar Children.only(children) para afirmar que children representa un solo React element.

function Box({ children }) {
  const element = Children.only(children);
  // ...

Parámetros

• children: El valor de children prop recibido por tú componente.

Regresa

Si children es un elemento valido, regresa ese elemento.

De lo contrario, lanza un error.

Advertencias

• Este método siempre se lanza si pasas un array (como el valor de retorno de Children.map) como children. En otras palabras, hace cumplir que children es un solo React element, no es que sea un array con un solo elemento.

Children.toArray(children)

Llamar Children.toArray(children) para crear un array a partir de la estructura de datos children.

import { Children } from 'react';

export default function ReversedList({ children }) {
  const result = Children.toArray(children);
  result.reverse();
  // ...

Parámetros

• children: El valor de children prop recibido por tú componente.

Regresa

Devuelve un array plano de elementos en children.

Advertencias

• Nodos vacíos (null, undefined, y Booleans) se omitirán en el array devuelto. Las keys de los elementos devueltos se calcularán a partir de las keys de los elementos originales y su nivel de anidamiento y posición. Esto asegura que aplanar el array no introduzca cambios en el comportamiento.

Solución de problemas

Paso un componente personalizado, pero los métodos Children y no muestran su resultado de renderizado

Supongamos que pasa dos children a RowList como esto:

<RowList>
  <p>First item</p>
  <MoreRows />
</RowList>

Si haces Children.count(children) dentro de RowList, obtendrás 2. Incluso si MoreRows renderiza 10 elementos diferentes, o si vuelve null, Children.count(children)seguirá siendo 2. Desde la perspectiva de RowList, solo “ve” el JSX que ha recibido. No “ve” las partes internas del componente MoreRows.

La limitación dificulta la extracción de un componente. Por eso las alternativas son preferibles al uso de Children.