解析错误：意外的令牌const

Question

我目前正在设置一个流星应用程序，我正在使用eslint和babel，但是我收到以下代码片段的错误：

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

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

错误：

2:4 - Parsing error: Unexpected token const

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

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

Answer 1

这是因为您正在使用arrow function的concise body并且期望()内的表达式而不是语句。要使用语句，您需要使用block body代替{}来使用()。

像这样：

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

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

根据 MDN Doc ：

  

箭头功能可以是“简洁的身体”或通常的“块”   体”。

     

在一个简洁的正文中，只需要一个表达式，一个隐含的表达式   返回附上。在块体中，您必须使用显式返回   言。

Answer 2

@Mayank Shukla 有解决方案，但我想补充一点，你也可以这样做：

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

({classes})部分称为“解构”，基本上意味着您从函数接收的classes参数中提取props属性。

您可以使用任意数量的参数执行此操作。例如：

const Navigation = ({classes, children}) => (
  <div className={classes.root}>
    {children}
  </div>
);

请查看MDN documentation了解详情：

  

解构赋值语法是一个JavaScript表达式，可以将数组中的值或对象的属性解包为不同的变量。