Babel-preset-react 使用三元运算符打破条件 Array.map答案

【问题标题】：Babel-preset-react breaks conditional Array.map with ternary operatorBabel-preset-react 使用三元运算符打破条件 Array.map
【发布时间】：2017-04-14 11:00:07
【问题描述】：

我有some code，其结构如下：

someArray.map(
  condition ?
    element => ({
      field: element.someField 
    }) :
    element => ({
      field: element.someOtherField
    })

我正在使用 Webpack 2.3.3 构建我的代码，当我只使用 babel-preset-es2015 或 babel-preset-env 时一切都很好，但如果我将 react 添加到我的预设中，我会得到以下信息：

ERROR in ./src/load/heatmapAxisCategories.js
Module build failed: SyntaxError: Invalid left-hand side in object destructuring pattern (38:27)

  36 |             isDifferential(experiment) ?
  37 |                 columnHeader => ({
> 38 |                     label: columnHeader.displayName,
     |                            ^
  39 |                     id: columnHeader.id,
  40 |                     info:{
  41 |                         trackId:columnHeader.id,

这迫使我为 JS 和 JSX 文件设置两个配置块，一个带有 env，另一个带有 react。然而，上面的语法似乎足够无害。你认为这是一个错误还是我遗漏了什么？

【问题讨论】：

这里似乎是语法错误)} :?
抱歉，打错了！原始代码没有它，正如我所说，使用env 或es2015 编译得很好。添加react时会中断。
似乎是一个 babel 解析器问题。用 () 包裹最后一个箭头函数有帮助。

标签： javascript reactjs ecmascript-6 babeljs

【解决方案1】：

相反，我会根据以下条件更改对象中的值：

someArray.map(element => ({
   field: condition ? element.someField : element.someOtherField
}))

【讨论】：