Desarrollé con React durante meses sin comprender completamente el poder real del modelo de componentes de React. Un día decidí sumergirme en la composición y esto es lo que aprendí.

Reaccionar componentes y niños

En React, un componente puede tener uno, muchos o ningún hijo. Genial, pero espera — ¿qué son los "niños"? Expliquemos con un ejemplo:

El componente Perfil tiene dos hijos: ProfileImage y ProfileDetails, mientras que estos dos no tienen hijos.

"En expresiones JSX que contienen una etiqueta de apertura y una etiqueta de cierre, el contenido entre esas etiquetas se pasa como un accesorio especial: props.children" — Documentación de React

Esencialmente, props.children es un accesorio especial, que se pasa automáticamente a cada componente, que se puede usar para representar el contenido incluido entre las etiquetas de apertura y cierre al invocar un componente. Este tipo de componentes se identifican en la documentación oficial como "cajas".

Identificación de componentes mediante la sintaxis JSX

En JSX de React, un componente con hijos siempre se identifica mediante una etiqueta de apertura y una etiqueta de cierre. Cada niño debe colocarse entre estas dos etiquetas, tal como hemos visto arriba. Cuando un componente no tiene hijos, puede invocarlo con o , pero generalmente se prefiere esta última sintaxis. El propósito de las etiquetas de cierre automático es hacer que el código sea más corto y más fácil de leer.

props.children en acciones

Supongamos que queremos crear un componente ImageSlider. Nuestro objetivo es invocar el componente así:

Como puedes ver, ImageSlider se compone de varios a los que se puede acceder y renderizar a través de props.children.

export default function ImageSlider(props) { 
    return (
      

        {props.children}
      
    );  
}

Gracias a props.children podemos anidar nuestro contenido dentro de un componente, tal como anidamos elementos HTML comunes.

¿Qué tipos de contenido están permitidos para props.children?

El contenido pasado a un componente a través de props.children puede incluir

indefinido, nulo, un booleano, un número, una cadena, un elemento de React o una matriz de cualquiera de estos tipos de forma recursiva. También puede ser una función que devuelva uno de estos tipos.

Tenga en cuenta que, como se menciona en la documentación de React, falso, nulo, indefinido y verdadero son hijos válidos, pero serán ignorados y no representados. Si desea que se represente falso, verdadero, nulo o indefinido, primero debe convertirlo en una cadena:

  { String(undefined) }

¿Por qué es tan importante props.children?

props.children nos permite componer componentes y, por lo tanto, nuestra interfaz de usuario como consecuencia; aprovechar el poder real del modelo de componentes de React.

"React tiene un poderoso modelo de composición, y recomendamos usar composición en lugar de herencia para reutilizar código entre componentes". — Reaccionar documentación

Como se explica en la documentación oficial, a veces es posible que necesites rellenar varios "huecos" en un componente. En tales casos, en lugar de utilizar props.children, el enfoque preferible puede ser definir múltiples accesorios personalizados; como se muestra en el siguiente ejemplo:

function SplitPane(props) {
  const { left, right } = props

  return (
    

      

        { left }      
      
      

        { right }      
      
    
  );
}

Reaccionar.Niños

"React.Children proporciona utilidades para tratar con la estructura de datos opaca props.children" — Documentación de React

¿Por qué props.children es una "estructura de datos opaca"?

Porque props.children puede consistir en uno, muchos o ningún elemento secundario, lo que significa que su valor puede ser un solo nodo secundario, una matriz de nodos secundarios o indefinido respectivamente. Gracias a la API React.Children podemos lidiar fácilmente con props.children sin tener en cuenta cada uno de sus posibles tipos. Afortunadamente, todo se manejará en segundo plano.

En el momento de escribir este artículo, React.Children ofrece cinco utilidades diferentes:

• mapa

• para cada

• contar

• solo

• aArray

Veamos cómo podemos usar React.Children con un ejemplo. Digamos que queremos agregar la clase CSS especial img-special-class a cada uno de los elementos secundarios del componente ImageSlider. Esto puede hacerse de la siguiente manera:

export default function ImageSlider(props) {
  const { children } = props

  return (
    

      {
        React.Children.map(children, (child) =>
          React.cloneElement(child, {
              className: `${child.props.className} img-special-class`
            })
        )
      }
    
  );
}

React.Children.map nos permite iterar sobre props.children y transformar cada elemento de acuerdo con la función pasada como segundo parámetro. Para lograr nuestro objetivo, utilizamos React.cloneElement. Esto se debe a que necesitábamos cambiar el valor de la propiedad className, pero las propiedades son ​​inmutables en React, por lo que tuvimos que clonar a cada hijo.

Conclusión

Dominar props.children es esencial para convertirse en un gran desarrollador de React y comenzar a aprovechar todo el potencial del modelo de componentes de React. props.children es una de las características más útiles de React, ya que nos brinda la capacidad de renderizar componentes secundarios. Por este motivo, todo desarrollador debería saber cómo utilizarlo correctamente.

Espero que este artículo te ayude a dominar la composición en React.

La publicación "Una guía completa sobre props.children en React" apareció por primera vez en Writech.