JSX element
ある時Propsではchildren:JSX element があるのに
その上の階層ではchildren の文字が見当たらなかったので調べてみました。
コンポーネントで事前に子要素が分からない場合に
props.childrenを使って子要素の出力を行います。
つまりページに吐きだす際にスタイル、文字などを設定できるので便利です。
実際に試してみました。
function A(props){
return (<div>props.children</div>)
function wait(){
return(
<A>
<h1>waiting</h1>
</A>
);
}
//呼び出し
function App(){
return (
<div><header>
<wait />
</header></div>
);
}
childrenが定義の1か所なので困惑しましたが理解できました。
この場合タグの間にある処理がchildrenに代入されます。
もちろんchildrenを書く書き方もあります。
function A(props){
return (<div>props.children</div>)
function wait(){
props.children = (
<h1>waiting</h1>
);
return(<A></A>);
}
//呼び出し
function App(){
return (
<div><header>
<wait />
</header></div>
);
}