Reactを使う 3 - propsのValidationとデフォルト値 -

前回やったpropsですが、値チェックとデフォルト値を
設定する事ができます。

propsの値チェック(Validation)

前回のサンプルプログラムhello.jsxを以下のように修正します。

import React from 'react';
import ReactDOM from 'react-dom'

class Hello extends React.Component {

  // 新規追加(値チェック)
  static get propTypes() {
    return {
      date: React.PropTypes.number.isRequired
    };
   }

  render() {
    ~ 省略 ~
  }
}

本来はDateオブジェクトがpropsのdateに設定されるのですが、
今回はわざとNumberがpropsのdateに設定される+必須項目の制約を設けています。

// 型が数値かつ必須のプロパティ
date: React.PropTypes.number.isRequired

この状態で実行するとコンソールに以下のようなWarningが表示されます。

propTypesで設定できるチェック項目は以下になります。

チェック対象の型	設定値
Array	React.PropTypes.array
Boolean	React.PropTypes.bool
Function	React.PropTypes.func
Number	React.PropTypes.number
Object	React.PropTypes.object
String	React.PropTypes.string
Symbol	React.PropTypes.symbol

また、以下のようなチェックも可能です。

• クラスのinstanceチェック

aInstance: React.PropTypes.instanceOf(aClass)

• propsの値がチェック値のいづれか

values: React.PropTypes.oneOf(['One', 'Two'])

• propsの値がいづれかの型

types: React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.number,
    React.PropTypes.instanceOf(aClass)
  ])

その他にも色々ありますので、詳しくは公式ページで。

propsのデフォルト値

次はデフォルト値を設定してみたいと思います。
hello.jsxに以下に修正します。

class Hello extends React.Component {

  // 新規追加(値チェック)
  static get propTypes() {
    return {
      date: React.PropTypes.instanceOf(Date).isRequired
    };
   }

  // 新規追加(デフォルト値)
  static get defaultProps() {
   return  {
      date: new Date(1980, 1, 1, 11, 11, 11)
   };
  }

  ~ 省略 ~
}

setInterval(function() {
  ReactDOM.render(
    <Hello  />, // propsの指定なし
    document.getElementById('container')
  );
}, 1000);

dateが未設定だった場合デフォルト値としてnew Date(1980, 1, 1, 11, 11, 11)を
設定しています。値チェックはDateオブジェクトが設定されるように修正しています。

実際に動作させてみると以下のようになります。

ちゃんとデフォルト値の11:11:11が表示されています。