在使用babel的React组件中，箭头功能被认为是意外令牌 [英] Arrow function is considered unexpected token in React component using babel

问题描述

我的React组件之一具有此功能.

I have this function in one of my react components.

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

当webpack watch命中时，我在箭头功能上收到意外的令牌错误.我启用了transform-es2015-arrow-functions插件，但它似乎并没有改变结果.

When webpack watch hits it I get an unexpected token error on the arrow function. I have the transform-es2015-arrow-functions plugin enabled but it doesn't seem to change the outcome.

关于我在这里做错什么的任何想法吗?

Any ideas on what i'm doing wrong here?

推荐答案

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

You need an equals sign when using class property initializers.

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

• 确保已启用 transform-class-properties Babel转换
• 与类方法不同，类属性初始化程序后应跟分号
• Ensure you have the transform-class-properties Babel transform enabled
• Unlike class methods, class property initializers should be followed by semicolons

Babel在箭头功能中的文档ES6 React组件显示了更长的示例.

Babel's docs on arrow functions in ES6 React components shows longer examples.

这篇关于在使用babel的React组件中，箭头功能被认为是意外令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！