今回はPropTypesを利用していてハマった所について取り上げたいと思います。
Props, PropTypesとは
propsはコンポーネント作成時に値を指定することでコンポーネントで表示させたいデータを指定できます。
React.jsでコンポーネントを定義する時に、PropTypesを指定することでpropsにおける引数の入力チェックを行えます。
数値や文字列、配列などのバリデーションを行いたい時に便利です。
しかし、15.5.0(April 7, 2017)以上ではdeprecatedされて、ライブラリとしてインポートする必要が出てきました。
15.5.0以前
import React, { Component } from 'react';
//中略
App.propTypes = {
data: React.PropTypes.array.isRequired
};
15.5.0以降
import React, { Component } from 'react';
import PropTypes from 'prop-types';
//中略
App.propTypes = {
data: PropTypes.array.isRequired
};
xxx.isRequiredは型を必須にしたい時に使ってください。
ローカルのバージョンは npm list --depth=0 で確認できます。
執筆時点では16.2.0でした。
(深さ(depth)指定しないと、かなり深い階層のも表示されて見づらかったです。)
> npm list --depth=0
//省略
+-- react@16.2.0
+-- react-autosuggest@9.4.2
+-- react-bootstrap@0.32.4
+-- react-component-octicons@1.8.0
+-- react-dom@16.5.2
//省略
prop-typesを使って指定できる型について調べてみました。
| オプション | 説明 |
|---|---|
| PropTypes.number | 数値かチェック |
| PropTypes.string | 文字列かチェック |
| PropTypes.array | 配列かチェック |
| PropTypes.bool | booleanかチェック |
| PropTypes.object | オブジェクトかどうかをチェック |
| PropTypes.func | 関数かどうかをチェック |
| PropTypes.node | renderできるものかをチェック |
| PropTypes.instanceOf(XXX) | XXXのinstanceかどうか |
| PropTypes.oneOf(['foo', 'bar']) | fooかbarのどちらか |
| PropTypes.oneOfType([PropTypes.string, PropTypes.array]) | 文字列か配列 |
| PropTypes.arrayOf(PropTypes.string) | 文字列の配列かどうか |
| PropTypes.objectOf(PropTypes.string) | 文字列の値を持つか |
| PropTypes.element | React Element(?) |
| PropTypes.any.isRequired | 何か必須 |
複数の条件を絞り込めたりと、色々な型を調べられるんですね。
参考
- 今からはじめるReact.js〜propsとstate、それからrefs〜
- react/CHANGELOG.md(GitHub)
- React のバージョンを 15.5 系にあげたときにやったこと
- React.jsのPropTypesの一覧
- ReactJS “TypeError: Cannot read property 'array' of undefined”
Reactの勉強、はじめました。