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