4
egghead.ioで約 [Use ES2016 Property Initializer Syntax in ES6 classes]のレッスンを見ましたが、それはよく分かりません。 はここで、上に述べた教訓から、定期的に反応させ、ステートフルなコンポーネントです: ES2016プロパティイニシャライザの構文をES6クラスで使用するとよい反復パターン
class App extends Component {
constructor() {
super()
this.state = {
todos: [],
currentTodo: ''
}
}
this.handleInputChange = this.handleInputChange.bind(this)
handleInputChange (evt) {
this.setState({
currentTodo: evt.target.value
})
}
render() {
return (
...
<TodoForm handleInputChange={this.handleInputChange}
currentTodo={this.state.currentTodo}
<TodoList todos={this.state.todos}/>
...
);
}
}
ここES2016の構文を使用して、同じリファクタリングコンポーネントです:
class App extends Component {
state = {
todos: [],
currentTodo: ''
}
handleInputChange = (evt) => {
this.setState({
currentTodo: evt.target.value
})
}
render() {
return (
...
<TodoForm handleInputChange={this.handleInputChange}
currentTodo={this.state.currentTodo}
<TodoList todos={this.state.todos}/>
...
);
}
}
現在のところ、あまり人気がありませんが、実際にはまだ見ていません。そして、私はそれが生産コードで使用することを推奨しないと思います。 –
@TarasYaremkivこれは、毎日ここに掲載される例がたくさんあります。プロダクションでの使用を推奨しないのはなぜですか? –
私はES7はES6ほど広くサポートされていないと思います。実際にWebpackでこれを使うために必要なのは、npmをインストールしてbabel-preset-es2016をインストールし、baber.rcを "presets"に変更することです:["es2016"]? –