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.'
);
}
}

🚜 参考リンク

📚 おすすめの書籍