没有花括号的箭头功能

Question

没有花括号的箭头功能我是ES6和React的新手，我一直在看箭头功能。为什么有些箭头函数在胖箭头之后使用花括号而有些使用括号？例如：const foo = (params) => (     <span>         <p>Content</p>     </span>);与const handleBar = (e) => {     e.preventDefault();     dispatch('logout');};谢谢你的帮助！

Answer 1

括号返回单个值，花括号执行多行代码。

您的示例看起来很混乱，因为它使用的JSX看起来像多个“行”，但实际上只是编译为单个“元素”。

以下是一些例子，它们都做同样的事情：

const a = (who) => "hello " + who + "!";

const b = (who) => (

    "hello " + 

    who + 

    "!"

);

const c = (who) => {

  return "hello " + who + "!";

}; 

您还经常会看到围绕对象文字的括号，因为这是一种避免解析器将其视为代码块的方法：

const x = () => {} // Does nothing

const y = () => ({}) // returns an object

Answer 2

也可以使用花括号来防止单行箭头函数返回一个值 - 或者让下一个开发人员明白单行箭头函数不应该返回任何东西。

例如：

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

Answer 3

实际上在公文包中有人在箭头函数声明中使用大括号时，它等于下面：

const arrow = number => number + 1;

|||

const arrow = (number) => number + 1;

|||    

const arrow = (number) => ( number + 1 );

|||

const arrow = (number) => { return number + 1 };