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>
);
}

children:JSX Element

JSX element