ReactのPropTypes Validator

3151 ワード
React JavaScript JavaScript テキストリンク

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'])

参考

AndroidにおけるJSON関連応用分析について
試みを知っている試み