React.jsのPropTypesの一覧


React.jsでコンポーネントを定義する際にPropTypesを指定すること受け取る引数(props)の入力チェックを行うことができます。数値や文字列、配列を受け取ったかをチェックでき、条件を見対していない場合はconsoleに警告を出すことができます。

この機能はReact v15.5以上ではdeprecatedになっています。この機能を使う場合は「prop-types」をインストールする必要があります。

🤔 サンプルコード

React.jsのPropTypesを含むコードのサンプルです。

import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string
};

🎂 PropTypesの一覧

React.jsのPropTypesの紹介です。

基本的なPropTypes

オプション 説明
React.PropTypes.number 数値かどうかをチェック
React.PropTypes.string 文字列かどうかをチェック
React.PropTypes.array 配列のチェック
React.PropTypes.bool booleanか否かをチェック
React.PropTypes.object オブジェクトかどうかをチェック
React.PropTypes.func 関数かどうかをチェック
React.PropTypes.node renderできるものかをチェック
React.PropTypes.element React Element
ct.PropTypes.any.isRequired どんな型でもよいが必須

応用的なPropTypes

オプション 説明
React.Proptypes.instanceOf(XXX) XXXのインスタンスかチェック
React.PropTypes.arrayOf(React.PropTypes.string) 文字列の配列かどうかをチェック
React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]) 文字列か数値のいずれかのtypeを満たすかチェック
React.PropTypes.objectOf(React.PropTypes.string) 文字列の値をもつかどうかチェック
React.PropTypes.shape({title: React.PropTypes.string}); 指定された形式を満たしているかどうかチェック

カスタムした制約を定義することもできます。

customPropType: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '`. Validation failed.'
);
}
}

🍮 参考リンク

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です!(有償でも1,480円/月と格安)