使用babel的React组件中，箭头函数被视为意外的标记。

Question

我在我的React组件中有这个函数。

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

当webpack监视它时，箭头函数会出现意外的标记错误。我已启用了transform-es2015-arrow-functions插件，但似乎并没有改变结果。

你有什么想法吗？

- DigitalDisaster

---

showAll是一个类的方法吗？ - baao

我曾经通过在 babel-loader 中添加 options : { plugins: ["transform-class-properties"]} 来摆脱它。 - Andrew_1510

是的 @Andrew_1510，对我来说就是这样 - 别忘了 npm install babel-plugin-transform-class-properties --save。 - Joey Gough

对于较新版本的Babel，我在.babelrc中使用以下内容：{ "plugins": ["@babel/plugin-proposal-class-properties"] } - Jeremy

Answer 1

当使用类属性初始化器时，您需要加上等于号。

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

• 确保启用了 transform-class-properties Babel 转换器
• 与类方法不同，类属性初始化程序应该后跟分号

Babel关于ES6 React 组件中箭头函数的文档显示更多示例。

- Ross Allen

---

奇怪，现在我的第一个等号出现了意外的符号。 - DigitalDisaster

你的 Babel 配置中启用了 transform-class-properties transform 吗？ - Ross Allen

嘭！这让我前进了。非常感谢。仍在学习babel和ES6的很多知识。 - DigitalDisaster

Babel文档链接已经404。 - Karl Taylor

@bambam，你能进一步解释一下你的评论是什么意思吗？ - kojow7

Answer 2

您需要分配箭头函数，以下是创建命名箭头函数的正确语法。

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

- Nitsew

---

没有 const。我对这个问题的理解是它是一个类内部的属性初始化器。 - Ross Allen

@RossAllen 没错，我认为 OP 应该提供更多的代码。 - Nitsew

同意，但第一句话确实说“我在我的 React 组件中有这个函数。” - Ross Allen

我现在意识到了。 - DigitalDisaster