Help us understand the problem. What is going on with this article?

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^)丿

hirodeath
front end developer. / もうすぐ20代後半になります。 もふもふ☆パラダイスという技術系同人サークル代表。最近はreact.jsに夢中。
http://mohu-para.com/
hrbrain
人事評価クラウドHRBrainを開発・運営するスタートアップ
https://www.hrbrain.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした