小编典典

无花括号的箭头功能

javascript

我是ES6和React的新手,并且我不断看到箭头功能。为什么某些箭头函数在粗体箭头之后使用花括号,而另一些使用括号?例如:

const foo = (params) => (
    <span>
        <p>Content</p>
    </span>
);

const handleBar = (e) => {
    e.preventDefault();
    dispatch('logout');
};

谢谢你的帮助!


阅读 379

收藏
2020-04-25

共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
2020-04-25