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>
);
}
}
Antworten:
Referenz: Eine kurze Einführung in Reacts Requisiten
quelle
Ich gehe davon aus, dass Sie dies in der
render
Methode einer React-Komponente wie folgt sehen (bearbeiten: Ihre bearbeitete Frage zeigt dies tatsächlich) :children
ist eine spezielle Eigenschaft von React-Komponenten, die alle untergeordneten Elemente enthält, die innerhalb der Komponente definiert sind, z . B. dasdivs
InnereExample
oben.{this.props.children}
schließt diese Kinder in das gerenderte Ergebnis ein.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.
quelle
render
, aber es wären in jedem Fall die gleichen Kinder. Durch Akzeptieren untergeordneter Elemente (falls zutreffend) kann jede Instanz Ihrer Komponente unterschiedliche Inhalte haben. Ich habe das Beispiel in der Antwort aktualisiert.props.children
stellt den Inhalt zwischen dem öffnenden und dem schließenden Tag beim Aufrufen / Rendern einer Komponente dar:aufrufen / aufrufen / rendern
Foo
:quelle