#はじめに
propsの使い方について分かりやすくまとめられてる海外記事があったので、参考にpropsの使い方をまとめてみました。
React Props Cheatsheet: 10 Patterns You Should Know
*紹介する上で幾つか省いているものがあります。
「そもそもpropsとは ?」 という方は、こちらの記事がオススメです。
propsとstateのイメージをつかむ【はじめてのReact】
##1. 親から子への値渡し
親コンポーネントでpropsとして渡したい値を定義し、子に渡すという流れです。
おそらくpropsで一番最初に勉強する使い方だと思います。
import React from 'react'
// 親コンポーネント
function App () {
return (
<MyComponent title="react" />
)
}
// 子コンポーネント
function MyComponent (props) {
return (
<h1>Hello {props.title}!</h1>
)
}
export default App;
// 出力結果
// Hello react
2. 条件分岐としてのprops
通常、propsはkey = "value"の様に値を定義して使います。上記で言うと、title="hoge"ですね。
しかしvalueを定義せず、keyだけを定義して条件分岐として利用する事が出来ます。
import React from 'react'
function App () {
return (
<MyComponent showTitle />
)
}
function MyComponent (props) {
if (props.showTitle) {
return <h1>Hello React</h1>
}
return null
}
export default App;
// 出力結果
// Hello React
公式では条件付きレンダーとしてvalueに真偽値を持たせた条件分岐が紹介されています。
3. 引数に分割代入を用いて、接頭辞propsを省く
上記で紹介してきましたprops.titleやprops.showTitleといった、接頭辞propsは実は分割代入で省く事が出来ます。
サンプルでは引数内で分割代入をしています。
import React from 'react'
function App () {
return (
<MyComponent
showTitle
title="Hello React"
/>
)
}
function MyComponent ({ showTitle, title }) {
if (showTitle) {
return <h1>{title}</h1>
}
return null
}
export default App;
// 出力結果
// Hello React
ちなみに引数で分割代入を使うのでは無く、この様に書くことも出来ます。
function MyComponent (props) {
const {showTitle, title} = props
if (showTitle) {
return <h1>{title}</h1>
}
return null
}
reactの学習を進めていると、いつの間にかpropsの記述が省かれているコードを見かける様になりましたが、分割代入を使っていたんですね。
4. 子要素の出力
JSXにおいて MyComponent>の様に閉じタグを用意してあげると、囲われた要素をprops.children として出力する事が可能になります。
import React from 'react'
function App () {
return (
<MyComponent showTitle>
<h2>Hello React</h2>
</MyComponent>
)
}
function MyComponent ({ showTitle, children }) {
if (showTitle) {
return children
}
return null
}
export default App;
// 出力結果
// Hello React
5. スプレッド構文を用いて、propsをまとめて記述
propsオブジェクトをスプレット演算子でまとめて記述するやり方です。
例文におけるpropsオブジェクトとは、Appコンポーネント内のdataの事を指します。
import React from 'react'
function App () {
const data = {
title: 'my title',
description: 'my description'
}
return (
<MyComponent {...data} />
)
}
function MyComponent ({ title, description }) {
return (
<h1>{title}</h1>
<p>{description}</p>
)
}
export default App;
// 出力結果
// my title
// my description
ただ公式は
スプレッド演算子は便利ではありますが、コンポーネント内で利用しないプロパティを不用意に渡してしまったり、意味をなさない HTML 属性を DOM に渡してしまうようなことが容易に起きえます。そのためこの構文は慎重に利用してください。
と言っているので、安易に使わない方が良いかもですね。
##最後に
色々なpropsの使い方を紹介してきました。
「他にもこんな使い方あるよ」や「ここは間違ってる」等のご意見がありましたらご教授頂けると幸いです。
##参考