Help us understand the problem. What is going on with this article?

children:JSX Element

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>
);
}
crunchtimer
AI開発情報を発信しています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away