reactjs - 第 2 阶段 ecmaScript，在类内部解构时出现意外标记

Question

使用 stage 2 es 我有一个带有 prop.contest 与此 PropType 匹配的 React 组件

ContestPreview.propTypes = {
  contest: PropTypes.shape({
    id: PropTypes.number,
    categoryName: PropTypes.string,
    contestName: PropTypes.string,
  }).isRequired,
};

组件是：

class ContestPreview extends React.Component {
  { contest } = this.props;
  { contestName, categoryName } = contest;

  handleClick = () => {
    console.log(contestName);
  };

  render() {

    return (
      <div className="link ContestPreview" role="button" onClick={this.handleClick}>
        <div className="category-name">
          {categoryName}
        </div>
        <div className="contest-name">
          {contestName}
        </div>
      </div>
    );
  }
}

问题是我从 eslint 收到一个错误，unexpected token它指向我的破坏分配的开头 {。在 ES6 中，我很乐意在其中创建构造函数并设置我的属性。这对于stage2的当前状态是否正常？我可以解决这个问题

contest = this.props.contest;this.contest.categoryName而是引用。但是我的 eslinting 规则确实抱怨react/destructuring-assignment代码运行良好。我只使用第 2 阶段，因为我正在做的 Lynda.com 课程正在使用它。

我的问题是，让解构工作的最佳方法是什么？目前不确定如果我更改了项目配置，我将如何将内容修改回 es6。

标签： reactjsecmascript-6ecmascript-2016