无花括号的箭头功能

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