這個類聲明中使用的Javascript形式是什么？

Question

這是來自React-toolbox的表格示例 （可以使用標簽）

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}
      />
    );
  }
}

這不能用webpack / babel編譯，但是下面的'正確'的Javascript確實如此。 這是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 / babel chokes on：

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

這是使用類屬性 ，它們是Babel第2階段預設的一部分 。

對於此代碼，類主體中的=語句將通過類屬性轉換移動到構造函數中。

這是Babel REPL中的原始代碼，其中應用了適當的預設 。

您需要將此預設（或較低階段預設，因為所有Babel舞台預設還包括更高階段功能）添加到您的Babel配置，或單獨添加轉換插件。

示例Babel配置，它將提供轉換原始代碼所需的所有功能：

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

Answer 2

它在類內部的=聲明中拋出錯誤。 由於React沒有自動綁定規則，您需要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}
      />
    );
  }
}