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

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关于ES6 React组件中箭头函数的文档显示了更长的例子.