无法在 React Component 的 let/var 中存储箭头函数

Question

我在 react 中有一个由 extends React.Component 定义的组件。在它里面，连同 render 方法，是：

constructor(props, context) {
    super(props, context);

    this.state = {
        open: false,
    };
}

handleClose = () => { //this works
    this.setState({open: false});
};

handleOpen = () => { //this works
    this.setState({open: true});
};

let empty = () => {}; // does not work, error  Parsing error:      Unexpected token

如果我在任何箭头函数前加上 let 或 const，我似乎会收到意外的标记错误。我在这里遗漏了什么吗？

谢谢

Answer 1

ECMA 2015 spec 似乎只允许 methods 和 static methods 在 class 定义的正文中。

因此，在这种情况下，赋值语句是不允许的，因此来自 babel 的 Unexpected token 错误。

Answer 2

阅读 babel documentation 关于类的内容。使用 let 或 const 不是类定义

的 ES6 可能前缀的一部分

Answer 3

您正在尝试使用实验性 ES7 功能并且可能只启用了 ES6（而且您不能在 class 中添加 let 或 const 前缀）。如果您使用的是 babel6，切换到正确的插件应该很简单。从基本相同的问题中看到这个答案：

Answer 4

您似乎在使用 class properties declartion proposal。建议的语法是：

class ClassWithoutInits {
  myProp;
}

class ClassWithInits {
  myProp = 42;
}

如您所见，没有 let 或 const 或 var。 let empty = () => {}; 不起作用，因为它不是有效的语法，就像错误消息告诉您的那样。

无法在 React Component 的 let/var 中存储箭头函数

Cannot store arrow function in let/var in React Component

javascript

jsx

ecmascript-6

reactjs

babeljs