PropTypes Validator
コンポーネントは最初から再利用する目的で作らなければならない。
コンポーネントに__どんな属性を持っていて、どんな属性が必須で、どんなタイプの値を貰わなければならないのか__などの明細を残せば色んな意味で便利でしょう。
そのためにReactではPropTypesを提供する。
PropTypesは次のような長所がある。
- コンポーネントを開くことだけで、どんな属性が必要で、属性の形式は何なのか把握できる。
- 属性が漏れたり間違った場合は、consoleにエラーメッセージを出力してくれる。
JavaScript Primitives PropTypes
Validator | 説明 |
---|---|
PropTypes.array | Propはarrayでなければならない。 |
PropTypes.bool | Propはbooleanでなければならない。 |
PropTypes.func | Propはfunctionでなければならない。 |
PropTypes.number | Propはnumberでなければならない。 |
PropTypes.object | Propはobjectでなければならない。 |
PropTypes.string | Propはstringでなければならない。 |
PropTypes.symbol | Propはsymbolでなければならない。 |
arrayやobjectは使わない方がいい。
属性のタイプを特定するためにPropTypesを使っているのに、arrayやobjectはその範囲が広すぎて特定することができない。
arrayやobjectを使った場合、eslintからエラーが出る。
- PropTypes.arrayは非推奨。代わりにPropTypes.arrayOfを使う。
- PropTypes.objectは非推奨。代わりにPropTypes.objectOf又はPropTypes.shapeを使う。
Combined Primitives PropTypes
Validator | 説明 |
---|---|
PropTypes.oneOftype | Propは色んなタイプの一つだ。 PropTypes.oneOftype([ PropTypes.string, PropTypes.number, PropTypes.instanceOf(Message)]) |
PropTypes.arrayOf | Propは特定タイプのarrayでなければならない。 PropTypes.arrayOf(PropTypes.number) |
PropTypes.objectOf | Propは特定タイプの属性値を持つobjectでなければならい。 PropTypes.objectOf(PropTypes.number) |
PropTypes.shape | Propは独特な形態を待つobjectでなければならない。 PropTypes.shape({ color: PropTypes.string, fontSize: PropTypes.number}) |
Special PropTypes
Validator | 説明 |
---|---|
PropTypes.node | Propはレンダリングができるどんな値もできる。numbers, strings, elements, array |
PropTypes.element | PropはReact elementでなければならない。 |
PropTypes.instanceOf | Propは指定されたクラスのインスタンスでなければならない。 jsのinstanceof演算子を使用 PropTypes.instanceOf(Message) |
PropTypes.oneOf | Propはenumのような特定な値の範囲で制限される。 PropTypes.oneOf(['News', 'Photos']) |