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

More than 3 years have passed since last update.

初投稿です。

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

今回は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を導入することにより無事staticpropTypesdefaultPropsを書いても問題なく動作しました。

一応、簡単なサンプルを用意しました(かなり荒いですが)

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とは型の制約を付ける為に使用します。

今回の場合だと、namehobbyにはstringを、ageにはnumberを指定しています。

もしagestring文字列が入った場合、表示はされますが、コンソールでエラーが吐き出されます。


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を上書きすることが来ます。


まとめ



  • defaultPropspropTypesstaticで書くにはstage-0が必要。


  • propTypesは型を指定する。


  • defaultPropsは値のデフォルト値を設定する。

以上です。

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