このクラス宣言で使用されるJavascriptの形式は何ですか？

Question

これは、これは私のためのWebPACK /バベルでコンパイルされませんが、次の「正しい」Javascriptがないtable exampleからリアクト・ツールボックスを（タグを使用することができる）

class TableTest extends React.Component { 
    state = { selected: [], source: users }; 

    handleSelect = (selected) => { 
    this.setState({selected}); 
    }; 

    render() { 
    return (
     <Table 
     model={UserModel} 
     onSelect={this.handleSelect} 
     selectable 
     multiSelectable 
     selected={this.state.selected} 
     source={this.state.source} 
     /> 
    ); 
    } 
} 

からです。このJSX表記法と、私が思うようにJSXを翻訳していないという兆候ですか？

class TableTest extends React.Component { 
    constructor() { 
    super(); 
    this.state = { selected: [], source: users }; 

    this.handleSelect = (selected) => { 
     this.setState({selected}); 
    }; 
    } 

    render() { 
    return (
     <Table 
     model={UserModel} 
     onSelect={this.handleSelect} 
     selectable 
     multiSelectable 
     selected={this.state.selected} 
     source={this.state.source} /> 
    ); 
    } 
} 

のWebPACK /バベルがオンにチョーク：

ERROR in ./src/client/app/app.jsx 
Module build failed: SyntaxError: Unexpected token (21:8) 

    19 | 
    20 | class TableTest extends React.Component { 
> 21 | state = { selected: [], source: users }; 

Answer 1

これは、現在バベルのstage 2 presetの一部であるclass propertiesを、使用しています。

このコードの場合、クラス本体内の=ステートメントは、クラスプロパティー変換によってコンストラクターに移動されます。

Here's the original code in the Babel REPL with suitable presets applied。

Babelの設定にこのプリセット（またはすべてのBabelステージプリセットにはより高いステージの機能も含む）を追加するか、個別にトランスフォームプラグインを追加する必要があります。すべての機能を提供する

例バベルの設定は、元のコードをtranspileする必要があります：それはクラスの内部で=宣言でエラーを投げ

{ 
    presets: ['es2015', 'react', 'stage-2'] 
} 

Answer 2

。 ReactのautobindingルールなしのためにthisをhandleSelectにバインドする必要があります。

https://facebook.github.io/react/docs/reusable-components.html#no-autobinding

class TableTest extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
     selected: [], source: users 
     }; 
     this.handleSelect = this.handleSelect.bind(this); 
    } 

    handleSelect(selected) { 
    this.setState({selected}); 
    } 

    render() { 
    return (
     <Table 
     model={UserModel} 
     onSelect={this.handleSelect} 
     selectable 
     multiSelectable 
     selected={this.state.selected} 
     source={this.state.source} 
     /> 
    ); 
    } 
}