Che cos'è {this.props.children} e quando dovresti usarlo?

Essendo un principiante al mondo React, voglio capire in profondità cosa succede quando lo uso {this.props.children}e quali sono le situazioni da utilizzare lo stesso. Qual è la rilevanza di esso nello snippet di codice sottostante?

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

Che cosa sono anche i "bambini"?

I documenti di React dicono che puoi usarli props.childrensu componenti che rappresentano "scatole generiche" e che non conoscono i loro figli in anticipo. Per me, questo non ha chiarito le cose. Sono sicuro che per alcuni quella definizione ha perfettamente senso, ma per me non è stato così.

La mia semplice spiegazione di ciò che this.props.childrenfa è che viene utilizzato per visualizzare tutto ciò che si include tra i tag di apertura e chiusura quando si richiama un componente.

Un semplice esempio:

Ecco un esempio di una funzione senza stato utilizzata per creare un componente. Ancora una volta, poiché questa è una funzione, non esiste una thisparola chiave, quindi usalaprops.children

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

Questo componente contiene un messaggio <img>che ne riceve alcuni propse quindi viene visualizzato {props.children}.

Ogni volta che viene richiamato questo componente {props.children}verrà visualizzato anche e questo è solo un riferimento a ciò che si trova tra i tag di apertura e chiusura 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>
  )
}

Invece di invocare il componente con un tag a chiusura automatica, <Picture />se lo si richiama si apriranno e chiuderanno completamente i tag, <Picture> </Picture>è quindi possibile inserire più codice tra di esso.

Questo separa il <Picture>componente dal suo contenuto e lo rende più riutilizzabile.

Riferimento: una rapida introduzione ai props.children di React

Presumo che tu stia vedendo questo nel rendermetodo di un componente React , come questo (modifica: la tua domanda modificata lo mostra effettivamente) :

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è una proprietà speciale dei componenti React che contiene qualsiasi elemento figlio definito all'interno del componente, ad esempio l' divsinterno Examplesopra. {this.props.children}include quei figli nel risultato di rendering.

... quali sono le situazioni per usare lo stesso

Lo faresti quando vuoi includere gli elementi figli nell'output renderizzato direttamente, senza modifiche; e non se non l'hai fatto.

props.children rappresenta il contenuto tra i tag di apertura e chiusura quando si richiama / si esegue il rendering di 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>;

invoca / chiama / render Foo:

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