Będąc początkującym w świecie React, chcę dogłębnie zrozumieć, co się dzieje, gdy używam {this.props.children}
i jakie są sytuacje , w których mogę tego samego użyć. Jakie jest jego znaczenie w poniższym fragmencie kodu?
render() {
if (this.props.appLoaded) {
return (
<div>
<Header
appName={this.props.appName}
currentUser={this.props.currentUser}
/>
{this.props.children}
</div>
);
}
}
Odpowiedzi:
Odniesienie: Szybkie wprowadzenie do rekwizytów Reacta. Dzieci
źródło
Zakładam, że widzisz to w
render
metodzie komponentu Reacta , na przykład (edycja: Twoje edytowane pytanie rzeczywiście to pokazuje) :children
to specjalna właściwość komponentów Reacta, która zawiera dowolne elementy potomne zdefiniowane w komponencie, np.divs
wnętrzeExample
powyżej.{this.props.children}
uwzględnia te elementy podrzędne w renderowanym wyniku.Zrobiłbyś to, gdybyś chciał bezpośrednio dołączyć elementy potomne do renderowanego wyjścia, bez zmian; a nie jeśli nie.
źródło
render
, ale w każdym przypadku będą to te same dzieci. Akceptując elementy podrzędne (w stosownych przypadkach), każde wystąpienie komponentu może mieć inną zawartość. Zaktualizowałem przykład w odpowiedzi.props.children
reprezentuje zawartość między otwierającym i zamykającym tagiem podczas wywoływania / renderowania komponentu:invoke / call / render
Foo
:źródło