LoginSignup
13

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-05-22

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

今回は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^)丿

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13