Question

我在我的一个反应组件中有这个功能。

export default class EventTags extends React.Component{
      showAll () => {
        this.setState({
          showAll: true,
          showBtn: false
        });
      }
}

当webpack watch遇到它时，箭头功能会出现意外的令牌错误。我启用了transform-es2015-arrow-functions插件，但它似乎没有改变结果。

关于我在这里做错了什么的想法？

Answer 1

使用类属性初始值设定项时需要等号。

export default class EventTags extends React.Component {
  showAll = () => {
    this.setState({
      showAll: true,
      showBtn: false
    });
  };
}

确保您启用了transform-class-properties Babel转换
与类方法不同，类属性初始值设定项后面应加分号

Babel的arrow functions in ES6 React components上的文档显示了更长的例子。

Answer 2

您需要指定箭头功能，下面是创建命名箭头功能的正确语法。

const showAll = () => {
  this.setState({
    showAll: true,
    showBtn: false
  });
}

Arrow函数在使用babel的React组件中被视为意外令牌

2 个答案: