React の世界の初心者として、React を使用すると何が起こるのか、また、React を使用する状況はどのようなものなのかを深く理解したいと思っています{this.props.children}。以下のコード スニペットとの関連性は何ですか?
render() {
if (this.props.appLoaded) {
return (
<div>
<Header
appName={this.props.appName}
currentUser={this.props.currentUser}
/>
{this.props.children}
</div>
);
}
}
ベストアンサー1
「子供」って一体何ですか？
React のドキュメントには、'汎用ボックス' を表し、事前に子要素がわからないコンポーネントに を使用できると書かれています
props.children。私にとっては、これではよくわかりませんでした。一部の人にとっては、この定義は完全に理にかなっていると思いますが、私にはそうではありませんでした。
簡単に説明すると、コンポーネントを呼び出すときに、開始タグと終了タグの間に含まれる内容を表示するために使用されます
this.props.children。
簡単な例:
これはコンポーネントを作成するために使用されるステートレス関数の例です。繰り返しますが、これは関数なので
thisキーワードはなく、単にprops.children
const Picture = (props) => {
return (
<div>
<img src={props.src}/>
{props.children}
</div>
)
}
このコンポーネントには、
<img>を受信してprops表示する が含まれています{props.children}。
このコンポーネントが呼び出されるたびに、
{props.children}も表示されます。これは、コンポーネントの開始タグと終了タグの間にあるものへの参照にすぎません。
//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>
)
}
自己終了タグを使用してコンポーネントを呼び出す代わりに
<Picture />、完全な開始タグと終了タグを使用してコンポーネントを呼び出すと、<Picture> </Picture>その間にさらに多くのコードを配置できます。
これにより、コンポーネントとそのコンテンツが分離され
<Picture>、再利用性が高まります。