没有大括号的箭头功能

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