「子供」とは何ですか?
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>
コンポーネントがコンテンツから切り離され、再利用性が高まります。
参照:Reactのprops.childrenの簡単な紹介