我是 ES6 和 React 的新手，我一直看到箭头函数。为什么有些箭头函数在粗箭头后使用花括号，有些使用括号？例如：
const foo = (params) => (
<span>
<p>Content</p>
</span>
);
对比
const handleBar = (e) => {
e.preventDefault();
dispatch('logout');
};
没有花括号的箭头函数
IT技术
javascript
reactjs
ecmascript-6
arrow-functions
2021-01-20 21:14:53
6个回答
括号返回单个值，大括号执行多行代码。
您的示例看起来令人困惑，因为它使用的 JSX 看起来像多个“行”，但实际上只是被编译为一个“元素”。
下面是一些更多的例子，它们都做同样的事情：
const a = (who) => "hello " + who + "!";
const b = (who) => ("hello " + who + "!");
const c = (who) => (
"hello " + who + "!"
);
const d = (who) => (
"hello "
+ who
+ "!"
);
const e = (who) => {
return "hello " + who + "!";
};
您还会经常看到围绕对象文字的括号，因为这是避免解析器将其视为代码块的一种方法：
const x = () => {} // Does nothing
const y = () => ({}) // returns an object
还可以使用花括号来防止单线箭头函数返回值——或者让下一个开发人员清楚地看到，在这种情况下，单线箭头函数不应该返回任何值。
例如：
const myFunc = (stuff) => { someArray.push(stuff) }
const otherFunc = (stuff) => someArray.push(stuff)
console.log(myFunc()) // --> logs undefined
console.log(otherFunc()) // --> logs result of push which is new array length
实际上，在公文包中，当有人在箭头函数声明中使用大括号时，它等于以下内容：
const arrow = number => number + 1;
|||
const arrow = (number) => number + 1;
|||
const arrow = (number) => ( number + 1 );
|||
const arrow = (number) => { return number + 1 };
在箭头函数中使用括号来返回一个对象。
() => ({ name: 'YourName' }) // This will return an object
那相当于
() => {
return { name : 'YourName' }
}
括号有一个隐式的 return 语句，而大括号则需要一个显式的 return 语句
其它你可能感兴趣的问题