初投稿です。
とか書くとニコニコ動画大好きなのバレてしまいそうですが、嘘です。
今回はES2015でdefaultPropsとかpropTypesの書き方の備忘録です。
ES2015でdefaultPropsとかpropTypesってどうやって書くのか最初わからず詰まってしまいました。
babelさんがstaticを使って書いているの見てstatic使えば良いのかと思っていたのですがコンソールでエラーが多発しました。
https://babeljs.io/blog/2015/06/07/react-on-es6-plus
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の中にコンポーネントが入っています。
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を見てみると...
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^)丿