propsとは？
親コンポーネントから子コンポーネントにデータを受け渡しすることができる機能のことです。
思想
propsは変更不可能なイミュータブルな値です。値を変更することはReactの思想に反して予期せぬ動作に繋がるので避けましょう。
実装
下記はどちらもファンクショナルComponentですがpropsによりデータを連携させています。
|
1 2 3 4 5 6 7 8 9 10 11 |
const App = () => { return ( <React.Fragment> <User name={"Ichiro"} /> </React.Fragment> ) } const User = (props) => { return <div>{props.name}</div> } |
上記内容は下記のように書き換えも可能です。
|
1 2 3 4 5 6 7 8 9 10 11 |
const App = () => { return ( <React.Fragment> <User name={"Ichiro"} /> </React.Fragment> ) } const User = ({name}) => { return <div>{name}</div> } |
複数項目をまとめて渡せます。
スプレット演算子（...）を使用すれば複数項目をまとめて渡すことが可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const App = () => { const data = { name:"Ichiro", age: 45 }; return ( <React.Fragment> <User {...data} /> </React.Fragment> ) } const User = ({name,age}) => { return <div>{name} {age}歳</div> } |
defaultProps
defaultPropsを使用するとpropsの初期値を指定できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const App = () => { return ( <React.Fragment> <User name={"Ichiro"} /> <User /> </React.Fragment> ) } const User = (props) => { return <div>{props.name}</div> } User.defaultProps = { name: "名無し" } |
propTypes
propsの型チェックや必須チェックをすることができます。
|
1 2 3 4 5 6 7 |
const User = (props) => { return <div>{props.name}</div> } User.propTypes = { name: PropTypes.string } |
上記のようにPropTypes.stringという型を定義した場合は文字列型を定義できます。propsで文字列以外を渡した場合はエラーになります。なお、必須チェックもできます。
| 書き方 | チェックで内容 |
|---|---|
| PropTypes.string | 文字列 |
| PropTypes.number | 数値 |
|
name: PropTypes.string.isRequired
|
必須かどうか |
この記事へのコメントはありません。