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

Siendo un principiante en el mundo de React, quiero entender en profundidad qué sucede cuando lo uso {this.props.children}y cuáles son las situaciones para usarlo. ¿Cuál es su relevancia en el siguiente fragmento de código?

render() {
  if (this.props.appLoaded) {
    return (
      <div>
        <Header
          appName={this.props.appName}
          currentUser={this.props.currentUser}
        />
        {this.props.children}
      </div>
    );
  }
}

Apr 07 '18 18:04 nim007

¿Qué son "niños"?

Los documentos de React dicen que se puede utilizar props.childrenen componentes que representan "cajas genéricas" y que no conocen a sus hijos de antemano. Para mí, eso realmente no aclaró las cosas. Estoy seguro de que para algunos esa definición tiene mucho sentido, pero no lo fue para mí.

Mi explicación simple de lo que this.props.childrenhace es que se usa para mostrar todo lo que incluye entre las etiquetas de apertura y cierre al invocar un componente.

Un ejemplo sencillo:

A continuación se muestra un ejemplo de una función sin estado que se utiliza para crear un componente. Nuevamente, dado que se trata de una función, no hay ninguna thispalabra clave, así que simplemente useprops.children

const Picture = (props) => {
  return (
    <div>
      <img src={props.src}/>
      {props.children}
    </div>
  )
}

Este componente contiene un mensaje <img>que recibe algunos propsy luego los muestra {props.children}.

Siempre que se invoque 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 (
    <div className='container'>
      <Picture key={picture.id} src={picture.src}>
          //what is placed here is passed as props.children  
      </Picture>
    </div>
  )
}

En lugar de invocar el componente con una etiqueta de cierre automático, <Picture />si lo invoca con etiquetas de apertura y cierre completas, <Picture> </Picture>puede colocar más código entre ellos.

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

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

Apr 07 '2018 11:04 Soroush Chehresa

props.childrenrepresenta el contenido entre las etiquetas de apertura y cierre al invocar/presentar un componente:

const Foo = props => (
  <div>
    <p>I'm {Foo.name}</p>
    <p>abc is: {props.abc}</p>

    <p>I have {props.children.length} children.</p>
    <p>They are: {props.children}.</p>
    <p>{Array.isArray(props.children) ? 'My kids are an array.' : ''}</p>
  </div>
);

const Baz = () => <span>{Baz.name} and</span>;
const Bar = () => <span> {Bar.name}</span>;

invocar/llamar/renderizar Foo:

<Foo abc={123}>
  <Baz />
  <Bar />
</Foo>

utilería y utilería.niños

Jul 08 '2020 08:07 zeljko_a

Supongo que estás viendo esto en el rendermétodo de un componente de React, como este (editar: tu pregunta editada sí lo muestra) :

class Example extends React.Component {
  render() {
    return <div>
      <div>Children ({this.props.children.length}):</div>
      {this.props.children}
    </div>;
  }
}

class Widget extends React.Component {
  render() {
    return <div>
      <div>First <code>Example</code>:</div>
      <Example>
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </Example>
      <div>Second <code>Example</code> with different children:</div>
      <Example>
        <div>A</div>
        <div>B</div>
      </Example>
    </div>;
  }
}

ReactDOM.render(
  <Widget/>,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Expandir fragmento

childrenes una propiedad especial de los componentes de React que contiene cualquier elemento secundario definido dentro del componente, por ejemplo, el divsinterior Examplede arriba. {this.props.children}incluye esos niños en el resultado renderizado.

...¿cuáles son las situaciones para usar el mismo?

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

Apr 07 '2018 11:04 T.J. Crowder