Help us understand the problem. What is going on with this article?

ReactのPropTypes Validator

More than 1 year has 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'])

参考

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした