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]

如果箭头函数中没有曲线括号，则输出数组[1]。

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

Answer 1

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

调整第一个示例，使其返回：

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; }

另请查看"When should I use return in es6 Arrow Functions?"。

Answer 2

对于数组函数，如果函数只包含单个语句，则可以像在第二个示例中一样省略大括号。如果这样做，该函数会隐式返回此语句求值为的值。

如果您没有省略大括号，则不会发生此隐式返回，从而导致示例中的返回值为undefined。

Read more about the semantics of arrow functions on MDN.

Answer 3

你的第一个例子没有返回任何内容。虽然看起来你的第二个例子也没有，但没有大括号的lambda函数只有一个语句会隐式返回评估该语句的结果。

使用和不使用大括号的等效性将是......

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代码中曲线括号有什么问题

3 个答案: