Sendo um iniciante no mundo React, quero entender em profundidade o que acontece quando eu uso {this.props.children}
e quais são as situações para usar o mesmo. Qual é a relevância disso no snippet de código abaixo?
render() {
if (this.props.appLoaded) {
return (
<div>
<Header
appName={this.props.appName}
currentUser={this.props.currentUser}
/>
{this.props.children}
</div>
);
}
}
Respostas:
Referência: uma introdução rápida aos props.children de React
fonte
Suponho que você esteja vendo isso em um
render
método do componente React , assim (editar: sua pergunta editada de fato mostra isso) :children
é uma propriedade especial dos componentes React que contém qualquer elemento filho definido no componente, por exemplo, odivs
interiorExample
acima.{this.props.children}
inclui esses filhos no resultado renderizado.Você faria isso quando quiser incluir os elementos filho na saída renderizada diretamente, sem alterações; e não se você não o fez.
fonte
render
, mas seriam as mesmas crianças em todos os casos. Ao aceitar elementos filho (quando apropriado), cada instância de seu componente pode ter conteúdo diferente. Eu atualizei o exemplo na resposta.props.children
representa o conteúdo entre as tags de abertura e fechamento ao invocar / renderizar um componente:invocar / chamar / render
Foo
:fonte