![株式会社デジナーレ[designare]](https://designare.jp/wp-content/themes/designare_new/img/logo.svg){kind=logo}
Writer： tokuyasu 更新日：2023/10/16
こんにちは、デジナーレ福岡オフィスの徳安です。
この記事では、【React】Propsについて説明します。
propsとは
props（“properties” の略）とは
コンポーネントに受け渡す引数のようなもので、
コンポーネントは、受け取ったpropsに応じて
表示するスタイルや内容を変化させることが可能。
Propsの渡し方
<App.jsx>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const App = () => { const red = { color: 'red', }; const pink = { color: 'pink', }; const blue = { color: 'blue', }; return ( <> <p style={red}>Hello!!</p> <p style={pink}>こんにちは!!</p> <p style={blue}>你好!!</p> </> ); }; |
上記コードをcomponentを分割して、
propsの受け渡しによって
変化することができるように作成する。
childen
タグで囲んだ要素は
childrenとして受け渡すことが可能。
|
1 |
<Sample color="red">Hello!! ←この部分がchildrenとして受け渡される</Sample> |
1. 「props.XX」と書く渡し方
各propsに対してprops.XXと記述する必要があり、
数が多いと煩雑になる。
<App.jsx>
|
1 2 3 4 5 6 7 8 9 |
const App = () => { return ( <> <Component color="red">Hello!!</Sample> <Component color="pink">こんにちは!!</Sample> <Component color="blue">你好!!</Sample> </> ); }; |
<Component.jsx>
|
1 2 3 4 5 6 7 8 9 10 11 |
const Component = (props) => { const style ={ color: props.color, } return ( <> <p style={style}>{props.children}</p> </> ) } export default Component; |
2. propsを分割代入する渡し方
propsはオブジェクトなので分割代入ができる。
<Component.jsx>
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const Component = (props) => { const { color, children } = props const style ={ color: color, } return ( <> <p style={style}>{children}</p> </> ) } export default Component; |
3. 引数の段階で分割代入
上記例ではpropsを引数の段階で、
分割代入することも可能。
（引数の段階で、分割代入する方法が
シンプルで一番スッキリする）
<Component.jsx>
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const Sample = ({color, children}) => { const style ={ color: color, } return ( <> <p style={style}>{children}</p> </> ) } export default Sample; |
下記部分はオブジェクトの省略記法が使用できる。
|
1 2 3 4 5 |
const style ={ // color: color, // key とvalueが同じなので、省略記法が使える。 color, } |
このように、propsの受け渡し方や省略記法にも
様々な書き方があるため、頭に入れておくことが必要。
ここまで読み進めていただきありがとうございます。
