Was ist {this.props.children} und wann sollten Sie es verwenden?

Als Anfänger der React-Welt möchte ich {this.props.children}genau verstehen, was passiert, wenn ich es benutze und in welchen Situationen ich es benutze . Welche Relevanz hat es im folgenden Code-Snippet?

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

Was ist überhaupt "Kinder"?

In den React-Dokumenten heißt es, dass Sie props.childrenKomponenten verwenden können, die "generische Boxen" darstellen und deren untergeordnete Elemente nicht im Voraus kennen. Für mich hat das die Dinge nicht wirklich geklärt. Ich bin mir sicher, dass diese Definition für einige durchaus Sinn macht, aber für mich nicht.

Meine einfache Erklärung this.props.childrenist, dass damit beim Aufrufen einer Komponente alles angezeigt wird, was Sie zwischen den öffnenden und schließenden Tags einfügen.

Ein einfaches Beispiel:

Hier ist ein Beispiel für eine zustandslose Funktion, mit der eine Komponente erstellt wird. Da dies eine Funktion ist, gibt es kein thisSchlüsselwort. Verwenden Sie einfachprops.children

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

Diese Komponente enthält eine <img> , die einige empfängt propsund dann angezeigt wird {props.children}.

Immer wenn diese Komponente aufgerufen {props.children}wird , wird sie auch angezeigt. Dies ist nur ein Hinweis darauf, was sich zwischen den öffnenden und schließenden Tags der Komponente befindet.

//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>
  )
}

Anstatt die Komponente mit einem selbstschließenden Tag aufzurufen <Picture /> aufzurufen, wenn Sie sie aufrufen, werden Tags vollständig geöffnet und geschlossen. <Picture> </Picture>Sie können dann mehr Code dazwischen platzieren.

Dies entkoppelt die <Picture> Komponente von ihrem Inhalt und macht sie wiederverwendbarer.

Referenz: Eine kurze Einführung in Reacts Requisiten

Ich gehe davon aus, dass Sie dies in der renderMethode einer React-Komponente wie folgt sehen (bearbeiten: Ihre bearbeitete Frage zeigt dies tatsächlich) :

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>

childrenist eine spezielle Eigenschaft von React-Komponenten, die alle untergeordneten Elemente enthält, die innerhalb der Komponente definiert sind, z . B. das divsInnere Exampleoben. {this.props.children}schließt diese Kinder in das gerenderte Ergebnis ein.

... was sind die Situationen, um das gleiche zu verwenden

Sie tun dies, wenn Sie die untergeordneten Elemente unverändert direkt in die gerenderte Ausgabe aufnehmen möchten. und nicht, wenn du es nicht getan hast.

props.children stellt den Inhalt zwischen dem öffnenden und dem schließenden Tag beim Aufrufen / Rendern einer Komponente dar:

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

aufrufen / aufrufen / rendern Foo:

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