javascript - start - ¿Qué es{this.props.children} y cuándo debe usarlo?

react js installation

Question

Al ser un principiante en React world, quiero comprender en profundidad lo que sucede cuando uso {this.props.children} y cuáles son las situaciones para usar lo mismo. ¿Qué relevancia tiene en el fragmento de código a continuación?

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

Answer 1

¿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 lo fue para mí.

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

Un simple ejemplo:

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

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

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

Cada vez que se invoca este componente, también se mostrará {props.children} 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 abrirá y cerrará las etiquetas <Picture> </Picture> , entonces puede colocar más código entre ellas.

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

Referencia: Una introducción rápida a los accesorios de React.

Answer 2

Supongo que está viendo esto en el método de render un componente React, como este (editar: su 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>

children es una propiedad especial de los componentes React que contiene todos los elementos secundarios definidos dentro del componente, por ejemplo, los divs dentro del Example anterior. {this.props.children} incluye esos hijos en el resultado procesado.

... 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.