Question

使用babel-preset-react（编辑：babel版本：v6.26.0），以下表达式失败并显示错误＆＃34; Invalid left-hand side in arrow function parameters＆＃34; （try on babel repl）：

true ? ("test") : x => 42      //FAILS, but only with `babel-preset-react`

然而，它有一点点修改：

true ? "test" : x => 42        //works fine

这两种情况在看似任何其他配置中都可以正常工作。

这是一个错误吗？或者有什么东西作为JSX解析的一部分导致这种情况发生？

Answer 1

箭头函数的解析方式与常规函数的解析方式不同见Parsing order

虽然箭头功能中的箭头不是操作符，但箭头函数具有与之不同的特殊解析规则运算符优先级与常规函数比较。

let callback;

callback = callback || function() {}; // ok

callback = callback || () => {};      
// SyntaxError: invalid arrow-function arguments

callback = callback || (() => {});    // ok

它必须与三元运算符的关联性（从右到左）有关，请参阅link

Answer 2

这样做的简单原因是()中的任何内容都被视为要评估的condition，因此它会尝试查找您未提供的匹配表达式，因此它会失败。事实上

true ? ("test")? 1: 2 : x => 42

编译得很好

"use strict";

true ? "test" ? 1 : 2 : function (x) {
  return 42;
};

检查 this demo

Answer 3

这是一个错误。我在babel github页面上创建了一个问题：babel/babel#7234。它在Babel 7中修复。

为什么我不能在JSX中以这种方式使用三元运算符和箭头函数？

3 个答案: