此 class 声明中使用的 Javascript 的形式是什么？

Question

这是来自 React-toolbox 的 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}
      />
    );
  }
}

这对我来说不能用 webpack/babel 编译，但下面的 'correct' 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 窒息：

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

这是在使用 class properties, which are currently part of Babel's stage 2 preset。

对于此代码，class 主体中的 = 语句将通过 class 属性转换移动到构造函数中。

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

您需要将此预设（或较低阶段预设，因为所有 Babel 阶段预设还包括较高阶段功能）添加到您的 Babel 配置，或单独向其添加转换插件。

示例 Babel 配置将提供转译原始代码所需的所有功能：

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

Answer 2

它在 class 内的 = 声明中抛出错误。由于 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}
      />
    );
  }
}

此 class 声明中使用的 Javascript 的形式是什么？

What is the form of Javascript used in this class declaration?

javascript

node.js

reactjs

react-jsx