沒有大括號的箭頭功能

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