Reactに久しぶりに触って忘れていたことをメモとして残します。
Reactのバージョンは16.13.1
を使いました。
前提
import React from 'react'; const persons = [ { name: "User1", age: 30 }, { name: "User2", age: 28 }, { name: "User1", age: 32 } ] const Person = (props) => { return <div>名前: {props.name} 年齢: {props.age}歳 </div> } const App = () => { return( <React.Fragment> { persons.map((person, index) => ({ <Person name={person.name} age={person.age} key={index}/>; })) } </React.Fragment> ) } export default App;
PropsTypesを使った型チェック
//追加 import PropTypes from 'prop-types'; //追加 Person.propsTypes = { name: PropTypes.string, age: PropTypes.number }
- React v15.5より別のライブラリ(props-types)から読み込まないといけない.
- 型をPropsTypesを使って管理できる.
データの値を不正な値にした場合
const persons = [ { name: "User1", age: "30" }, { name: "User2", age: 28 }, { name: "User1", age: 32 } ]
本来はPersonコンポーネントのpropsであるageの型はnumber型でないといけないが、personsの最初の配列のデータのageをstringで定義した場合
コンソールを確認すると警告を出してくれる。
index.js:1 Warning: Failed prop type: Invalid prop `age` of type `string` supplied to `Person`, expected `number`. in Person (at App.js:32) in App (at src/index.js:9) in StrictMode (at src/index.js:8)
propsの値を必須にする
Personのコンポーネントのnumberを必須にした場合
//追加 import PropTypes from 'prop-types'; //追加 Person.propsTypes = { name: PropTypes.string, age: PropTypes.number.isRequired }
const persons = [ { name: "User1" }, { name: "User2", age: 28 }, { name: "User1", age: 32 } ]
ageを必須にしたのにも関わらず、personsの最初のデータの値にageを持たせていない状態で定義した場合 以下のように警告を出してくれる
index.js:1 Warning: Failed prop type: The prop `age` is marked as required in `Person`, but its value is `undefined`. in Person (at App.js:32) in App (at src/index.js:9) in StrictMode (at src/index.js:8)