32
30

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ReactのPropTypes Validator

Last updated at Posted at 2017-06-26

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でなければならない。

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

参考

32
30
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
32
30

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?