IT技术 - 解析错误：意外的令牌常量 - 吾爱随笔录

IT技术 reactjs meteor ecmascript-6 babeljs eslint

2021-05-22 15:14:09

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

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

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

错误：

2:4 - Parsing error: Unexpected token const

我在这里重新创建了我的 eslint 配置。我的 .babelrc 配置如下：

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

2个回答

这是因为您正在使用concise body的的箭头功能，并且预计在表达式内()，而不是一个声明。要使用语句，您需要使用block bodyusing{}而不是()。

像这样：

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

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

根据MDN 文档：

箭头函数可以有一个“简洁的主体”或通常的“块主体”。

在简洁的正文中，只需要一个表达式，并附加一个隐式返回。在块体中，您必须使用显式 return 语句。

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

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

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

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

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

查看MDN 文档了解更多信息：

该解构赋值语法是JavaScript表达式，使得它可以从阵列解压缩的值，或从属性的对象，为不同的变量。

其它你可能感兴趣的问题