react.jsのprops周りをES2015で書いてみた

初投稿です。
とか書くとニコニコ動画大好きなのバレてしまいそうですが、嘘です。

今回はES2015でdefaultPropsとかpropTypesの書き方の備忘録です。
ES2015でdefaultPropsとかpropTypesってどうやって書くのか最初わからず詰まってしまいました。

babelさんがstaticを使って書いているの見てstatic使えば良いのかと思っていたのですがコンソールでエラーが多発しました。
https://babeljs.io/blog/2015/06/07/react-on-es6-plus

babelサンプル

class Video extends React.Component {
  static defaultProps = {
    autoPlay: false,
    maxLoops: 10,
  }
  static propTypes = {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
  }
  state = {
    loopsRemaining: this.props.maxLoops,
  }
}

思考錯誤の末、babel-preset-stage-0を導入することにより無事staticでpropTypesやdefaultPropsを書いても問題なく動作しました。

一応、簡単なサンプルを用意しました(かなり荒いですが)
https://github.com/takahiro-saeki/react-basic-todo/tree/props-test

サンプルの簡単な説明

ディレクトリ構成は以下のようになっています。

ディレクトリ構成

.
├── README.md
├── assets
│   └── js
│       ├── common.js
│       └── component
│           └── content.jsx
├── package.json
├── template
│   ├── index.html
│   └── js
│       └── main.js
└── webpack.config.js

assets/jsディレクトリのcommon.jsでReactDOM.renderしています。
assets/js/componentの中にコンポーネントが入っています。

assets/js/component/content.jsx

import React from 'react';

export default class Content extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: this.props.name,
      age: this.props.age,
      hobby: this.props.hobby
    }
  }

  static propTypes = {
    name: React.PropTypes.string.isRequired,
    age: React.PropTypes.number.isRequired,
    hobby: React.PropTypes.string.isRequired
  }

  static defaultProps = {
    name: 'hiro',
    age: 24,
    hobby: 'DanceDanceRevolution'
  }

  render() {
    return (
      <ul>
        <li>{this.state.name}</li>
        <li>{this.state.age}</li>
        <li>{this.state.hobby}</li>
      </ul>
    )
  }
}

propTypesについて

propTypesとは型の制約を付ける為に使用します。
今回の場合だと、nameとhobbyにはstringを、ageにはnumberを指定しています。
もしageにstring文字列が入った場合、表示はされますが、コンソールでエラーが吐き出されます。

defaultPropsについて

defaultPropsはその名の通りpropsのデフォルト値を指定することが出来ます。
constructor内でstateに対し、this.props.〜と指定することによりpropsの値をthis.state.〜で呼び出せるようにしています。

コンポーネント単位で分割する

次にjs/common.jsを見てみると...

assets/js/common.js

import React from 'react';
import ReactDOM from 'react-dom';
import Content from './component/content';

class Main extends React.Component {
  render() {
    return (
      <section>
        <Content name='hoge' age={30}/>
      </section>
    )
  }
}

ReactDOM.render(
  <Main />,
  document.getElementById('app')
)

<Content name='hoge' age={30}/>というような感じでdefaultPropsに指定したkey, valueを上書きすることが来ます。

まとめ

• defaultProps、propTypesをstaticで書くにはstage-0が必要。
• propTypesは型を指定する。
• defaultPropsは値のデフォルト値を設定する。

以上です。

良きreactライフを！ヽ(^o^)丿