¿Qué es {this.props.children} y cuándo debes usarlo?

Esta es la solución más acertada que encomtrarás dar, sin embargo mírala pausadamente y valora si se adapta a tu trabajo.

Solución:

¿Qué es incluso ‘niños’?

Los documentos de React dicen que puedes usar props.children en componentes que representan ‘cajas genéricas’ y que no conocen a sus hijos antes de tiempo. Para mí, eso realmente no aclaró las cosas. Estoy seguro de que para algunos, esa definición tiene mucho sentido, pero no para mí.

Mi explicación simple de lo que this.props.children hace es eso se utiliza para mostrar lo que incluya entre las etiquetas de apertura y cierre al invocar un componente.

Un ejemplo sencillo:

Este es un ejemplo de una función sin estado que se usa para crear un componente. Nuevamente, dado que esta es una función, no hay this palabra clave así que solo usa props.children

const Picture = (props) => 
  return (
    

      






      props.children
    
  )

Este componente contiene un que está recibiendo algo props y luego se muestra props.children.

Cada vez que se invoca este componente props.children también se mostrará y esto es solo una referencia a lo que hay entre las etiquetas de apertura y cierre del componente.

//App.js
render () 
  return (
    

      
          //what is placed here is passed as props.children  
      
    
  )

En lugar de invocar el componente con una etiqueta de cierre automático si lo invoca, se completarán las etiquetas de apertura y cierre luego puede colocar más código entre ellos.

Esto desacopla el componente de su contenido y lo hace más reutilizable.

Referencia: Una introducción rápida a props.children de React

Supongo que estás viendo esto en un componente de React render método, así (editar: su pregunta editada sí muestra eso):

class Example extends React.Component 
  render() 
    return 

      
Children (this.props.children.length):
      this.props.children
    
;
  


class Widget extends React.Component 
  render() 
    return 

      
First Example:
      
        1
        2
        3
      
      Second Example with different children:
      
        A
        B
      
    ;
  


ReactDOM.render(
  ,
  document.getElementById("root")
);

children es una propiedad especial de los componentes de React que contiene elementos secundarios definidos dentro del componente, por ejemplo, el divs en el interior Example encima. this.props.children incluye esos niños en el resultado renderizado.

…cuáles son las situaciones para usar el mismo

Lo haría cuando desee incluir los elementos secundarios en la salida renderizada directamente, sin cambios; y no si no lo hiciste.

props.children representa el contenido entre las etiquetas de apertura y cierre al invocar/renderizar un componente:

const Foo = props => (
  

    
I'm Foo.name
    
abc is: props.abc

    
I have props.children.length children.
    
They are: props.children.
    
Array.isArray(props.children) ? 'My kids are an array.' : ''
  
);

const Baz = () => Baz.name and;
const Bar = () =>  Bar.name;

invocar/llamar/hacer Foo:

---

---

Utiliza Nuestro Buscador