0
0

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 1 year has passed since last update.

【React】PropTypesの型チェックチートシート

Posted at

Reactはじめたて(JSもほぼ初心者)なので自分用にReact.PropTypesの型チェックチートシートを記述します。
公式サイトの情報をベースに自分が欲しい情報を調べて加えたものです。

型の種類

配列(Array)

PropTypes.array
// [ "天海春香", "如月千早", "星井美希" ]

// 特定型の配列の指定も可能 下記は数値のみの配列の場合
PropTypes.arrayOf(PropTypes.number)
// [ 10, 20, 30 ]

論理型(Boolean)

PropTypes.bool
// true, false

関数(func)

PropTypes.func
// memo

数値型(Number)

PropTypes.number
// 2023

オブジェクト(Object)

PropTypes.object
/*
{
  name: "天海春香"
  age : 17
}
*/

// objectのvalue値の指定も可能
PropTypes.objectOf(PropTypes.number)
/*
{
  width: 100,
  height: 200
}
*/

文字列型(String)

PropTypes.string
// "piyo"

シンボル型(Symbol)

PropTypes.symbol
// Symbol('fuga')

Symbol型とは?
その値が一意となるプリミティブ型の一種。
シンボル名が一意となるため、等価比較でもfalseとなる。
参考: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol

なんでも

PropTypes.any
// なんでもいいのでそもそも書く必要がないと思われる。

Node型

// 数値型、文字列型、element型、array型を指定することが可能。レンダリングできるものならなんでも
PropTypes.node
// 例: "piyo", 2023, memo:elements, ["hoge", "fuga", "piyo"]

element(React Element) / elementTypes(React ElementType)

// React Element(インスタンス)
PropTypes.element
// 例: <MyComponent />

// React ElementType(クラス)
PropTypes.elementType
// 例: MyComponent

// 特定のComponentに限定したい場合
PropTypes.instanceOf(MyComponent)

elementとelementTypeの違いについて
elementはインスタンス、elementTypeはクラスだそう
参考: https://gotohayato.com/content/527/

型以外のオプション

指定したキーは指定した型でなければならない

PropTypes.shape({
  name: PropTypes.string,
  age : PropTypes.number
})
// キーが必ず必要というわけではない
/*
{
  name: "如月千早"
  age : 16
}
*/

指定した配列の中の要素のいずれしか受け付けない

PropTypes.oneOf(['男性', '女性', '無回答'])
// 男性, 女性, 無回答の3択しか受け付けない

型を複数指定でき、そのどれかであればいい

PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number
])
// stringかnumberであればいい

指定したキー以外の値があるとNG

PropTypes.exact({
  name: PropTypes.string,
  age : PropTypes.number
})
// nameとage以外の値があるとNG

指定した要素が欠けている場合NG

PropTypes.string.isRequired
// 指定した型の値が必須

その他

デフォルト値

PropTypesComponent.defaultProps = {
  sampleKey: 'defaultの値'
}
// defaultPropsを使用してデフォルト値を設定することができる

カスタムルール

PropTypes.string.custumRule
// 見たことのない型指定ならカスタムルールかも

参考

0
0
2

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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?