reactjs - 解析错误: Unexpected token const

Question

我目前正在设置一个 Meteor 应用程序，并且正在使用 eslint 和 babel，但我收到以下代码片段的错误:

const Navigation = props => (
  const classes = props.classes;

  return (
    <div className={classes.root}>
    </div>
  )
);

错误:

2:4 - Parsing error: Unexpected token const

我重新创建了我的 eslint 配置 here 。 我的 .babelrc 配置如下:

{
  "presets": ["env", "react"]
}

Answer 1

这是因为您使用的是 arrow function 的简洁正文并且需要 () 内的表达式而不是语句。要使用语句，您需要使用 {} 而不是 () 来使用 block 体。

像这样:

const Navigation = props => {
  const classes = props.classes;

  return (
    <div className={classes.root}>
    </div>
  )
};

根据 MDN Doc :

Arrow functions can have either a "concise body" or the usual "block body".

In a concise body, only an expression is needed, and an implicit return is attached. In a block body, you must use an explicit return statement.