解析错误：意外的令牌常量

我目前正在设置一个 Meteor 应用程序，并且正在使用 eslint 和 babel，但是以下代码片段出现以下错误：

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

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

Error:

2:4 - Parsing error: Unexpected token const

我重新创建了我的 eslint 配置here https://eslint.org/demo/#eyJ0ZXh0IjoiXHRjb25zdCBOYXZpZ2F0aW9uID0gcHJvcHMgPT4gKFxuXHQgIGNvbnN0IGNsYXNzZXMgPSBwcm9wcy5jbGFzc2VzO1xuXHRcblx0ICByZXR1cm4gKFxuXHQgICAgPGRpdiBjbGFzc05hbWU9e2NsYXNzZXMucm9vdH0+XG5cdCAgICA8L2Rpdj5cblx0ICApXG5cdCk7Iiwib3B0aW9ucyI6eyJwYXJzZXJPcHRpb25zIjp7ImVjbWFWZXJzaW9uIjo2LCJzb3VyY2VUeXBlIjoibW9kdWxlIiwiZWNtYUZlYXR1cmVzIjp7ImpzeCI6dHJ1ZSwiZXhwZXJpbWVudGFsT2JqZWN0UmVzdFNwcmVhZCI6dHJ1ZX19LCJydWxlcyI6eyJjb25zdHJ1Y3Rvci1zdXBlciI6Miwibm8tY2FzZS1kZWNsYXJhdGlvbnMiOjIsIm5vLWNsYXNzLWFzc2lnbiI6Miwibm8tY29tcGFyZS1uZWctemVybyI6Miwibm8tY29uZC1hc3NpZ24iOjIsIm5vLWNvbnNvbGUiOjIsIm5vLWNvbnN0LWFzc2lnbiI6Miwibm8tY29uc3RhbnQtY29uZGl0aW9uIjoyLCJuby1jb250cm9sLXJlZ2V4IjoyLCJuby1kZWJ1Z2dlciI6Miwibm8tZGVsZXRlLXZhciI6Miwibm8tZHVwZS1hcmdzIjoyLCJuby1kdXBlLWNsYXNzLW1lbWJlcnMiOjIsIm5vLWR1cGUta2V5cyI6Miwibm8tZHVwbGljYXRlLWNhc2UiOjIsIm5vLWVtcHR5LWNoYXJhY3Rlci1jbGFzcyI6Miwibm8tZW1wdHktcGF0dGVybiI6Miwibm8tZW1wdHkiOjIsIm5vLWV4LWFzc2lnbiI6Miwibm8tZXh0cmEtYm9vbGVhbi1jYXN0IjoyLCJuby1leHRyYS1zZW1pIjoyLCJuby1mYWxsdGhyb3VnaCI6Miwibm8tZnVuYy1hc3NpZ24iOjIsIm5vLWdsb2JhbC1hc3NpZ24iOjIsIm5vLWlubmVyLWRlY2xhcmF0aW9ucyI6Miwibm8taW52YWxpZC1yZWdleHAiOjIsIm5vLWlycmVndWxhci13aGl0ZXNwYWNlIjoyLCJuby1taXhlZC1zcGFjZXMtYW5kLXRhYnMiOjIsIm5vLW5ldy1zeW1ib2wiOjIsIm5vLW9iai1jYWxscyI6Miwibm8tb2N0YWwiOjIsIm5vLXJlZGVjbGFyZSI6Miwibm8tcmVnZXgtc3BhY2VzIjoyLCJuby1zZWxmLWFzc2lnbiI6Miwibm8tc3BhcnNlLWFycmF5cyI6Miwibm8tdGhpcy1iZWZvcmUtc3VwZXIiOjIsIm5vLXVuZGVmIjoyLCJuby11bmV4cGVjdGVkLW11bHRpbGluZSI6Miwibm8tdW5yZWFjaGFibGUiOjIsIm5vLXVuc2FmZS1maW5hbGx5IjoyLCJuby11bnNhZmUtbmVnYXRpb24iOjIsIm5vLXVudXNlZC1sYWJlbHMiOjIsIm5vLXVudXNlZC12YXJzIjoyLCJuby11c2VsZXNzLWVzY2FwZSI6MiwicmVxdWlyZS15aWVsZCI6MiwidXNlLWlzbmFuIjoyLCJ2YWxpZC10eXBlb2YiOjJ9LCJlbnYiOnsiYnJvd3NlciI6dHJ1ZSwibm9kZSI6dHJ1ZSwibWV0ZW9yIjp0cnVlLCJlczYiOnRydWV9fX0=。 我的 .babelrc 配置如下：

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

这是因为您正在使用concise body of an 箭头函数 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions并期望里面的表达式()而不是一个声明。要使用语句，您需要使用block body通过使用{}代替().

像这样：

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

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

As per MDN Doc https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Function_body:

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

在简洁的正文中，只需要一个表达式，并且隐式地 附有退货单。在块体中，必须使用显式返回 陈述。