Babel 在箭头函数上抛出语法错误

Posted 2023-02-22

【中文标题】Babel 在箭头函数上抛出语法错误

【英文标题】：Babel throws a syntax error on arrow function

【发布时间】：2017-12-13 07:37:38

【问题描述】：

我正在尝试将this code 改编为一个带有 React 的小项目，但我遇到了麻烦，我不知道如何解决这个问题，因为我不知道这是原始代码还是我的 Babel 有问题（例如，缺少库或其他东西），或者我不能因为 React。

所以问题是我必须调整一些函数，否则 Babel 会在它们身上抛出一个意想不到的标记，即

static propTypes =  // unexpected '='
  onRequestSort: PropTypes.func.isRequired,
  onSelectAllClick: PropTypes.func.isRequired,
  order: PropTypes.string.isRequired,
  orderBy: PropTypes.string.isRequired,
;

变成了

static get propTypes() 
    return 
        onRequestSort: PropTypes.func.isRequired,
        onSelectAllClick: PropTypes.func.isRequired,
        order: PropTypes.string.isRequired,
        orderBy: PropTypes.string.isRequired,
    

还有这个：

handleRequestSort = (event, property) =>  ...  // unexpected '='

变成了这样：

handleRequestSort(event, property)  ... 

对于我的主要问题，我替换了这个：

createSortHandler = property => event =>  // unexpected '='
    this.props.onRequestSort(event, property);
;

通过这个

createSortHandler(property) 
    return function (event) 
        this.props.onRequestSort(event, property);
    ;
;

但是，如果我点击表格上触发订单更改的箭头，我会得到cannot read props of undefined。否则，我会得到 `unexpected token '='，正如我的代码中所写的那样。

所以我的问题如下：原始代码有问题吗，是我的 babel 还是其他什么？我目前在使用 webpacker 的 Rails 基础，但我不认为这是我遇到这些问题的原因。

【问题讨论】：

从方法中尝试return (event) => …

原始代码不是 ES6，而是提议的语法扩展。有问题的不是 Babel。您可以轻松地将this.handleRequestSort = (event, property) => …; 放入构造函数中。

【参考方案1】：

您缺少用于转换类属性的 babel-plugin-transform-class-properties 插件，这是实验性语法（因此意外标记 =）。如果您想为 propTypes 和类属性箭头函数使用类属性，请将其包含在 Babel 配置中。第二个错误，即 this.props 未定义是因为您使用的是常规函数，而 this 没有引用该组件。而是返回一个箭头函数：

createSortHandler(property) 
  return (event) => 
    this.props.onRequestSort(event, property);
  ;
;

【讨论】：

我安装了插件并重新编译了代码，但如果我尝试使用“旧”版本，我仍然会得到意外的“=”

@Jaeger 是否将其添加到配置中？

我没有通读整个文档，所以我没有看到需要添加它，我有一分钟感到愚蠢 :D 谢谢，现在一切似乎都很完美，我可以使用他们建议的语法！