Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

ReactのPropTypes Validator

More than 3 years have passed since last update.

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

参考

park-jh
プルスタックエンジニアになれるまで頑張ろう。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away