es6でreactを使うときのメモ

reactを触ってみた
せっかくなので新しい形で使いたくes6の形にしたら、reactの元の書き方では動かないところがあったのでメモしておく

1. getInitialState

# es6以前
var Component = React.createClass({
  getInitialState: function() {
    return {data: []};
  },

es6ではgetInitialStateというメソッドを定義しても動かない。以下のように定義する。

# es6
class Component extends React.Component {  
    constructor() {                                            
        super();                                               
        this.state = {                                         
            data: [],
        };                                                     
    }                                                          

2. props

render: function() {
    <Component id=1 />
}

このように呼び出されるComponentがあった場合、

# es6以前
var Component = React.createClass({
  getInitialState: function() {
    return {data: Store.getData(this.props.id)};
  },

# es6
class Component extends React.Component {  
    constructor(props) {                                            
        super(props);                                               
        this.state = {                                         
            data: Store.getData(props.id)},
        };                                                     
    }                                                          

es6ではconstructor内でpropsにアクセスするために引数として受け取る必要がある

3. callbackのthis

callbackとして登録したメソッド内で呼ばれるthisがundefinedになる
例えば、es6で以下のように書いてcallbackとして登録すると実行時にthisがundefinedとなる

render() {
    return <button onClick={this.callback} />
}

callback(event) {
    console.log(this.state.data);
}

なので以下のようにbindを利用する

render() {
    return <button onClick={this.callback.bind(this)} />
}

参考

• http://qiita.com/cubdesign/items/ee8bff7073ebe1979936
• http://qiita.com/koba04/items/bc13d1f42964278ae14e

入門 React ―コンポーネントベースのWebフロントエンド開発