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

Question

With babel-preset-react (EDIT: babel version: v6.26.0 ), the following expression fails with the error " Invalid left-hand side in arrow function parameters " ( try on babel repl ):

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

Yet it works given a small modification:

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

Both of these scenarios work as expected in seemingly any other configuration.

Is this a bug? Or is there something as a part of JSX parsing that causes this to happen?

Answer 1

Arrow functions are parsed differently than regular ones see Parsing order

Although the arrow in an arrow function is not an operator, arrow functions have special parsing rules that interact differently with operator precedence compared to regular functions.

let callback;

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

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

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

It must have something to do with associativity of ternary operator (right-to-left) see link

Answer 2

The simple reason for this is that anything within () is treated as an condition to evaluate and hence it tries to find matching expressions after it which you aren't providing and hence it fails. As a matter of fact

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

compiles just fine into

"use strict";

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

Check this demo

Answer 3

This is a bug. I've created an issue on the babel github page: babel/babel#7234 . It is fixed in Babel 7.