Propsとは
Propsとはコンポーネントに渡す引数のようなもので、コンポーネントを受け取ったPropsに応じて表示する内容を変化させます。簡単にいうと、コンポーネント（パーツ）に外部から値を与えるものです。Propsのイメージとしては、親コンポーネントから子コンポーネントに値を渡す際の入れ物のようなものになります。余談ですが、Propsは親から子へデータを一方通行（←オタクなのでアクセラレータって読みたくなります）で渡すものなので、原則Propsの中身を子から書き換えることはできません。
→ コンポーネントについて曖昧な方はこちらへ
Propsの使い方
Propsを使用するには渡す方（親コンポーネント）のタグの中に任意の名称を付け、値を属性値として=のあとに定義して、受け取る方（子コンポーネント）に渡します。
const App = () => {
return (
<>
<子コンポーネント関数名 任意の名称="値" />
</>
);
};
const 関数名 = (props) => {
return (
<>
<p>{ props.任意の名称 }</p>
</>
);
};
簡単な例（フォントサイズの指定、文字色の指定、文の内容の指定）
const App = () => {
return (
<>
<fontColorMessage fontSize="20px" color="skyblue" message="今日はデリシャスパーティプリキュアを見ました。" />
<fontColorMessage fontSize="30px" color="pink" message="昨日はぼっち・ざ・ろっく！を見ました。" />
</>
);
};
スタイル（CSS）はオブジェクトで指定も出来るので、以下のように変数を定義しておき、Propsを受け取りスタイルを割り当てる事も出来ます。
const fontColorMessage = (props) => {
const fontColor = {
fontSize: props.fontSize,
color: props.color
};
return (
<>
<p style={ fontColor }>{ props.message }</p>
</>
);
};
すると以下のようになります。
※プリキュアの放送日は日曜日で、この記事の執筆日は2022/10/30（日）なので上記の文の通りプリキュアを見てから執筆してます。ちなみにぼっち・ざ・ろっく！の放送日は土曜日。まじ神アニメ。
Propsを扱うテクニック
Propsでの分割代入と、オブジェクトの省略記法
上記の子コンポーネント内のCSSオブジェクトコードを見てみるとPropsを扱う場合毎回props.～と書いています。
const fontColor = {
fontSize: props.fontSize, // ← ここのこと
color: props.color // ← ここのこと
};
同じPropsを複数回使用する時、Propsの数が多い場合に毎回props.～と書くのはめんどくさいです。そこで以下のように最初の段階でPropsを分割代入しておくことで簡潔に扱うことができます。
const fontColorMessage = (props) => {
const { fontSize, color, message } = props; // Propsを分割代入
const fontColor = {
fontSize: fontSize, // propsが不要
color: color // propsが不要
};
return (
// ↓ propsが不要
<>
<p style={ fontColor }>{ message }</p>
</>
);
};
さらに、Propsを取り出したことにより、CSSオブジェクト内のfontSizeと、colorはプロパティ名と値の部分が同じになったので以下のようにオブジェクトの省略記法を用いて、省略して書くことができます。
const fontColor = {
fontSize, // 省略
color // 省略
};
引数の段階で展開
以下のように子コンポーネントでPropsを引数の()内で分割代入すると更に省略して書くことができます。
const fontColorMessage = ({ fontSize, color, message }) => { // 引数の()内で分割代入
const fontColor = {
fontSize: fontSize,
color: color
};
return (
<>
<p style={ fontColor }>{ message }</p>
</>
);
};
※destructure
Propsでの分割代入についてはプロジェクトのルール等にもよりますが、あえてprops.～と書いて分割代入しないことによってPropsから渡ってきた値だと認識しやすくする場合があります。一般的に分割代入してPropsを書くことをdestructureすると言います。頭の片隅にでも置いときましょう。
children
上記のPropsではタグ内で任意の名称を設定していました。それ以外でもchildrenというものも存在します。以下のように任意の要素をタグで囲って使用することができます。囲まれた部分がchildrenとしてPropsに設定されます。
const App = () => {
return (
// ↓ messageの部分がchildrenになった
<>
<fontColorMessage fontSize="20px" color="orange">明日はBLEACHの放送日です。</fontColorMessage>
<fontColorMessage fontSize="30px" color="red">明日はジャンプの発売日です。</fontColorMessage>
</>
);
};
値を受け取った子コンポーネント内では以下のようにprops.～のあとにchildrenと付けることで内容を表示することができます。
const fontColorMessage = (props) => {
const fontColor = {
fontSize: props.fontSize,
color: props.color
};
return (
// ↓ props.～のあとにchildrenを付ける
<>
<p style={ fontColor }>{ props.children }</p>
</>
);
};
すると以下の様になります。
※ちなみにchildrenでは単純な文字だけではなく、以下のようにタグで囲んだ要素を丸ごと渡すこともできます。
<fontColorMessage>
<>
<p>明日はBLEACHの放送日です。</p>
<p>明日はジャンプの発売日です。</p>
</>
</fontColorMessage>
子コンポーネントには以下のような値が渡ります。
<>
<p>明日はBLEACHの放送日です。</p>
<p>明日はジャンプの発売日です。</p>
</>
プロジェクトが大きくなると複雑なコンポーネントを組む機会が多くなるのでchildrenに関しては必須知識となります。
最後に
ここまで読んでくれてありがとうございます！Props、childrenについて自分なりのメモ、アウトプットの一環として書きました。僕にはReact仲間がいないので、これを読んでReact仲間が少しでも増える事を願います。