React Props.childrenの使い方、分割代入について
ReactのPropsにはchildrenという、テキスト情報を受け渡しできる専用の名称があります。
プロパティ値は専用タグ名称で受け渡し、テキスト情報（HTMLソース丸ごと）はchildrenで渡せます。
Propsは分割代入をする事でprops.の記述を省略する事ができますが、propsから渡ったデータかどうかが判別しにくくなります。
Propsの機能を最大限に利用する
前回の記事で、ReactのPropsによるデータの受け渡しについて紹介しました。
Propsは親要素がプロパティ値を保持しコンポーネント側に渡す事で、コンポーネントの表示を動的に変更する事ができます。
プロパティ値と同じタグ名にする
Propsで各データを渡す際、それぞれの値に「任意のタグ名」を設定していました。
例えば文字色のプロパティ値を受け渡すタグ名は、「color」でしたね。
・親要素側…color="black"、とタグをつけた場合
・コンポーネント側…props.color、で引き出す
このタグ名は自由に決定できますが、プロパティ名を連想できるタグにするべきです。
同じ名前にしておけば、誰でもイメージがしやすいためです。
テキスト情報はchildrenで受け取る事ができる
Propsではプロパティ値以外に、テキスト情報なども受け渡せると説明しました。
前回の記事では、タイトルテキストに「title」のタグ名をつけていましたね。
実はPropsでは、タグで囲ったテキスト情報は「children」の名称で受け渡す事ができます。
今回はこの特別な固定名称「children」を紹介します。
さらに多くのプロパティ値を受け渡す際に役に立つ、分割代入を使った管理方法もご紹介します。
特別なProps「children」
テキスト情報をPropsで受け渡す場合
前回の記事でテキスト情報をPropsで受け渡す場合は、以下の様に紹介していました。
親要素側（titleプロパティに情報を保持）
<Header title="テキスト文章" />
Header.jsx側（コンポーネントの出力コード）
<head>{props.title}</head>
親要素のtitleタグにテキストを入れ、Header.jsx側のprops.titleにデータを渡している訳ですね。
この様にわざわざtitleプロパティをつけなくても、テキスト情報は受け渡しする事ができます。
それがPropsの「children」です。
閉じるタグをつける
childrenを使えるようにするには準備が必要です。それが閉じるタグの設置です。
例えば<Header />のままではなく、きちんと閉じるタグをつける必要があります。
閉じる専用タグをつける（親要素のreturn内）
<Header /> 閉じるタグなしの状態 ↓ <Header></Header> 閉じるタグありに変える
上記の様に、開始タグと終了タグで挟むようにしましょう。
childrenでメッセージを受け取る
先程紹介した様に閉じるタグを追加すれば、タグの間にテキストを入れる事ができます。
親要素（テキスト情報をタグで挟む）
<Header>テキスト情報</Header>
Header.jsx（コンポーネント）
<head>{props.children}</head>
親要素側ではテキストをタグで挟んだだけで、タグはつけていません。
それに対しコンポーネント側で{props.children}とすると、挟んだテキスト情報を受け取る事ができます。
つまり開始タグと終了タグとで挟んだ中身は、props.childrenで簡単に受け渡しする事ができるのです。
タグ内はプロパティ値、タグで挟んだ部分はコンテンツ情報
・表示を変更する値…プロパティ名をつける
・テキスト…タグで囲む（childrenで引き出す）
コンポーネントの表示状態を変える様な値には任意のプロパティ名をつけ、タグ内に設置します。
テキスト情報はタグで挟めば、props.childrenで所定位置に渡せる訳です。
childrenはソース情報を丸ごと渡せる
テキストについては、タグで挟めばchildrenで受け渡しできる事がわかりました。
実はこのchildrenは、テキスト情報だけでなくタグで囲んだ要素も丸ごと渡す事ができます。
親要素（ExComponentsタグ内）
例えば以下の様に、ExComponentタグでHTMLソースを囲っているとします。
<ExComponents> ↓ここから <div> <h2>H2タイトル</h2> <ul> <li><a href="#">menu A</a></li> <li><a href="#">menu B</a></li> <li><a href="#">menu C</a></li> </ul> </div> ↑ここまで </ExComponents>
ExComponents.jsx（コンポーネント側）
<ExComponents>{props.children}</ExComponents>
この時ExComponentsタグ内のchildrenには、以下部分のソースが丸ごと渡された事になります。
<div> <h2>H2タイトル</h2> <ul> <li><a href="#">menu A</a></li> <li><a href="#">menu B</a></li> <li><a href="#">menu C</a></li> </ul> </div>
childrenはこの様に、テキスト情報以外にHTMLソースを丸ごと受け渡せます。
大変便利な機能であり、どちらかといえばこちらの機能がメインでしょう。
特に複雑なコンポーネントを組む際には、必須の技術になります。
Propsの分割代入について
次はPropsの分割代入の方法についてです。
これはコンポーネント内で書く「props.」記述部分を省略できる技です。
プロパティ値がたくさんあるとpropsは面倒
前の記事で紹介したように色とchildrenが1個ずつ程度なら、propsを書くのも2回なので問題はないでしょう。
しかし10個以上のプロパティ値を、次々と出現させる様なコンポーネントの場合は面倒です。
受け渡すプロパティ値が多ければ多いほど、「props.」をたくさん書かなければなりません。
Propsの分割代入
Propsの分割代入とは、最初の段階でPropsを一気に読み込んでおく事を指します。
これによりいちいちprops.の記述を書かずに済む様になります。
コンポーネント側
export const Color = () => { const { color, margin, fontSize, children } = props; const contentstyle ={ color: color, margin: margin, fontSize :fontSize }; return( <p sytle="contentStyle">{children};</p> ); }
最初の段階でcolor, margin, fontSize, childrenと代入して、Props要素を取り出しておきます。
そうする事でprops.colorやprops.childrenなど、毎回頭に「props」と書かずに済みます。
省略記法を使う
中でもCSSスタイル記述については、分割代入をする事でさらに省略ができます。
例えば文字の色の部分で言うと、プロパティ名と値の名称が両方とも「color」ですよね。
プロパティ名と設置された値を同じにすると、オブジェクトの省略記法を使う事ができます。
省略記法
const { color, margin, fontSize, children } = props; const contentstyle ={ color: color, margin: margin, fontSize :fontSize } ↓ const contentstyle ={ color, //color:の部分省略 margin, //margin:の部分省略 fontSize //fontSize:の部分省略 }
スタイル要素が値だけになっていて、非常にシンプルになりますね。
分割代入のデメリット
多くのプロパティ値が飛び交う様なコンポーネントの場合、分割代入でprops.表記を両略する事ができるのは便利です。
ただし実は分割代入には、デメリットもあります。
Propsの値かそうでないのかの判断がつきずらい
プロパティの先頭に「props.」と書いてあれば、それが親要素から渡ってきたPropsの値だとすぐにわかりますよね。
しかし分割代入の場合、上部で一度に展開してしまうため、それ以後propsの名称は出てこなくなります。
するとコンポーネント内に記載されている名称が「propsで渡ってきたものなのかそうでないのかが」ぱっと見ではわからなくなる場合があります。
ですので開発段階での指針として、あえて分割代入を使わない手段をとる場合もあります。
使うなら全てにおいて使い、使わないなら一切使わないと決めておくべきです。
