はじめに
前回はReactのイベントとスタイルを学びました。今回はReactの重要なPropsについてを書いていきたいと思います。
Props
Propsとはコンポーネントに渡す変数のようなものです、
コンポーネントは受け取ったpropsの値を使って処理を行います。
例えば文字を表示するコンポーネントがあった場合、『通常時は黒文字、エラー時は赤文字』を表示する場合、それぞれコンポーネントを用意するのではなく、コンポーネントのスタイルを変数によって動的に切り替えたいと思います。
※コンポーネントについてはこちら
Propsの基礎
Propsの基礎を実際のコードで学んでいきたいと思います。
まずは下記のようなスタイルが適用されているAppコンポーネントがあります。
export const App = () => {
// スタイル
const contentStyle = {
color: "red",
fontSize: "20px"
};
return (
<div>
<h1>Title</h1>
<p style={contentStyle}>Hello</p>
</div>
)
}
コンポーネントへの切り出し
次にここのpタグのところを別コンポーネントとしてcomponents/ColorMessage.jsxに切り出してみます
export const ColorMessage = () => {
// スタイル
const contentStyle = {
color: "red",
fontSize: "20px"
};
return (
<>
<p style={contentStyle}>Hello</p>
<>
)
}
import { ColorMessage } from "./components/ColorMessage";
export const App = () => {
return (
<div>
<h1>Title</h1>
<ColorMessage />
</div>
)
}
これでコンポーネントとして切り出しが出来ました。
Propsの使い方
このままだとColorMessageコンポーネントは常にHelloという文字しか表示できず、また色もredのみになってしまいます。そこで次はPropsを使って、App.jsx側から変数を用いて色と表示するメッセージを指定してみます。
まずは呼び出す方のApp.jsxで変数としてpropsを渡していきます。
color=xxx, message=xxx とします。
import { ColorMessage } from "./components/ColorMessage";
export const App = () => {
return (
<div>
<h1>Title</h1>
<ColorMessage color="blue" message="World" />
</div>
)
}
次にColorMessageコンポーネント側を修正してみます。
引数にpropsをとり、colorの指定をprops.colorに、表示する内容を{props.message]に変更します。
export const ColorMessage = (props) => {
// スタイル
const contentStyle = {
color: props.color,
fontSize: "20px"
};
return (
<>
<p style={contentStyle}>{props.message}</p>
<>
)
}
propsを使うことで無事にコンポーネントに変数を使用することができ、動的に変化させることが出来ました。
propsのchildren
propsには特別なものとしてchildrenがあります。
先程はprops.messageとしてコンポーネントの要素を指定しましたが、コンポーネントの中の要素は全てchildrenで取得できます。具体的に例を見ていきましょう。
// childrenは未設定
<ColorMessage />
// childrenはhogeが取得できる
<ColorMessage>hoge</ColorMessage>
// childreは複数の要素が取得できる
<ColorMessage>
<div>
<h1>title</h1>
<p>hello</p>
</div>
</ColorMessage>
これ利用するとさきほどmessageで渡しいた要素は、中に入れてしまえばchildrenで取得することができます。
ここではHello World!という中身がchildrenとして取得できます。
import { ColorMessage } from "./components/ColorMessage";
export const App = () => {
return (
<div>
<h1>Title</h1>
<ColorMessage color="blue">Hello World!</ColorMessage>
</div>
)
}
export const ColorMessage = (props) => {
// スタイル
const contentStyle = {
color: props.color,
fontSize: "20px"
};
return (
<>
<p style={contentStyle}>{props.children}</p>
<>
)
}
Propsのテクニック
propsを指定する際に毎回props.xxxと指定するのは面倒です。
そこで分割代入を利用するととても便利です。
※分割代入はこちらを参考に
分割代入を用いると、propsからこんな感じで変数に代入ができます。
export const ColorMessage = (props) => {
// propsを分割代入
const { color, children } = props;
// スタイル
const contentStyle = {
color: color, // props.colorでなくてよい
fontSize: "20px"
};
return (
<>
<p style={contentStyle}>{children}</p> // props.childrenでなくてよい
<>
)
}
また分割代入ではプロパティ名と一致していれば更に省略ができます。
一見書き忘れのように見えますが、これを使うと更に便利になります。
export const ColorMessage = (props) => {
// propsを分割代入
const { color, children } = props;
// スタイル
const contentStyle = {
color:, // プロパティ名のcolorと一致しているのでcolor: colorと書かなくて良い
fontSize: "20px"
};
...
}
さらに引数の時点で分割代入することも可能です
export const ColorMessage = ({ color, children}) => {
// 引数でpropsを分割代入しているので不要になる
// const { color, children } = props;
// スタイル
const contentStyle = {
color:, // プロパティ名のcolorと一致しているのでcolor: colorと書かなくて良い
fontSize: "20px"
};
...
}
まとめ
propsはコンポーネント同士で値を渡す変数のようなものです。
書き方が色々あって複雑のように思えますが、基礎をしっておけばこんな書き方で書いているな、と読み解けるはずです。
また、propsはReactにおいてとても重要な概念になるので基礎をしっかりと抑えておきたいところです。