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

【问题标题】：Why can't I use a ternary operator and arrow function in this way in JSX?为什么我不能在 JSX 中以这种方式使用三元运算符和箭头函数？
【发布时间】：2018-06-26 20:10:47
【问题描述】：

使用babel-preset-react（编辑：babel 版本：v6.26.0），以下表达式失败，错误为“Invalid left-hand side in arrow function parameters”（try on babel repl）：

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

但只要稍作修改，它就可以工作：

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

这两种情况在看似任何其他配置中都按预期工作。

这是一个错误吗？还是 JSX 解析的一部分导致这种情况发生？

【问题讨论】：

这可能与运算符的优先级有关。你能给出一个导致错误的完整示例吗？
您在完整示例中寻找什么？我已经尝试将表达式简化为可能的最小示例。
这听起来确实像 EcmaScript 解析器的错误，分组括号应该在字符串文字有效的每个位置都有效。但是，jsx 或 typescript 或 flow 可能会出现括号后面的冒号的问题。
听起来像一个解析器错误。这行得通吗？ true ? ("test") : (x => 42)
@ArashMotamedi 无论有没有babel-preset-react，都可以使用

标签： javascript reactjs babeljs jsx

【解决方案1】：

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

【讨论】：

【解决方案2】：

这样做的简单原因是() 中的任何内容都被视为condition 进行评估，因此它会尝试在它之后找到您没有提供的匹配表达式，因此它会失败。其实

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

编译成

"use strict";

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

检查this demo

【讨论】：

在我给出的示例中，我没有使用("test") 作为条件。它是三元运算符condition ? expression1 : expression2 的expression1。作为 JSX 的一部分，是否有一些东西会导致它被解析为条件？
正如我所说的，把它写在括号里会让 babel 认为这是一个条件
将“测试”括在括号中似乎并不是 babel 感到困惑的唯一原因。我还可以将箭头函数括在括号中 (true ? ("test") : (x => 42)) 以解决此问题。

【解决方案3】：

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

虽然箭头函数中的箭头不是运算符，但箭头函数具有特殊的解析规则，它们与运算符优先级与常规函数相比。

let callback;

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

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

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

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

【讨论】：

很高兴知道。但是，您给出的示例在使用 babel-preset-react 时不会改变行为。
是的，这一切都是正确的，并且是人们普遍接受的事情，但它不适用于逗号运算符和条件运算符，因为它们的操作数允许包含箭头。