ReactJS 的这段代码中的曲线括号有什么问题

Question

    const timezone = {'a' : 1};
    const options = map(timezone, (val, key) => {
        <option key={val} value={val}>{key}</option>
    });
    console.log(options);  // [undefined]

箭头函数中有曲线括号，输出[undefined]

    const timezone = {'a' : 1};
    const options = map(timezone, (val, key) => 
        <option key={val} value={val}>{key}</option>
    );
    console.log(options);  // Array[1]

箭头函数中没有花括号，输出Array[1]。

两段代码之间发生了什么？

Answer 1

第一个示例没有 return 值，第二个示例 return 是隐含的，作为可用箭头函数语法的一个特征。

调整第一个例子，使其returns:

const timezone = {'a' : 1};
const options = map(timezone, (val, key) => {
    return <option key={val} value={val}>{key}</option>
//  ^^^^^^
});

您可以继续阅读 arrow functions on MDN...

// 1) with braces (no return):
(param1, param2, …, paramN) => { statements }

// 2) without braces (implicit return):
(param1, param2, …, paramN) => expression

// 3) equivalent to 2 (braces with return statement):
(param1, param2, …, paramN) => { return expression; }

也看看。

Answer 2

对于数组函数，如果函数只包含一个语句，您可以像在第二个示例中所做的那样省略大括号。如果这样做，函数隐式地 return 将此语句的计算结果设为 。

如果您不省略大括号，则此隐式 return 不会发生，导致您的示例中的 return 值为 undefined。

Read more about the semantics of arrow functions on MDN.

Answer 3

您的第一个示例没有 return 任何内容。尽管您的第二个示例似乎也没有，但没有大括号且只有一条语句的 lambda 函数将隐式 return 评估该语句的结果。

带大括号和不带大括号的等价是...

const timezone = {'a' : 1};
const options = map(timezone, (val, key) => {
    return (<option key={val} value={val}>{key}</option>);
});
console.log(options);

和...

const timezone = {'a' : 1};
const options = map(timezone, (val, key) => 
    <option key={val} value={val}>{key}</option>
);
console.log(options);

ReactJS 的这段代码中的曲线括号有什么问题

What is wrong with curve bracket in this code of ReactJS

javascript

ecmascript-6

reactjs

react-jsx

babeljs