javascript - 这个类声明中使用的 Javascript 格式是什么？

Question

这来自 table example来自 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 阻塞:

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 ，目前是 Babel stage 2 preset 的一部分.

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

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

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

Babel 配置示例，它将提供转换原始代码所需的所有功能:

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