どこかにあるとは思いますが自分へのメモも兼ねて。
React.createClass => class Hoge extends React.Component
React.createClassの返り値であるConstructorはReact.Componentをprototypeとして持っています。
加えて、引数のobjectのプロパティをマッピングするなどの種々の処理を行っています。
一方、classはprototypeの継承しか行っていないので、種々の処理と同等のことを書かなければなりません。
思いつく書き方
直感で思いつく書き方は以下かと思います。
Todo.js
import React, { Component } from 'react'
class Todo extends Component {
constructor(props, context, updater) {
super(props, context, updater)
}
getInitialState() {
return { list: [] }
}
addToList(todo) {
this.state.list.push(todo)
this.setState({ list: this.state.list })
}
render() {
return (
<div>
<h1>Todo</h1>
<TodoForm addToList={this.addToList} />
<TodoList list={this.state.list} />
</div>
)
}
}
はい、これだとエラーが出てしまいます。
https://facebook.github.io/react/docs/reusable-components.html#es6-classes
公式にもありますが、getInitialStateは呼ばれないので、constructorでstateの初期化を行う必要があります。
また、他のJavaなどとは違いthisは常にclassをcontextとしないようです。
そのため、this.addToListが呼ばれた時のthisのcontextはTodoではないです。
結果、this.addToListの実行時にstateがnullやらsetStateなんてプロパティは持っていないやら怒られます・・
修正
Todo.js
import React, { Component } from 'react'
class Todo extends Component {
constructor(props, context, updater) {
super(props, context, updater)
// 以下修正点
this.state = { list: [] }
this.addToList = this.addToList.bind(this)
}
...,
}
this.stateをconstructor内で初期化してあげて、this.addToListのthisのcontextをclassにbindしてあげます。
以上でエラーはなくなります。