反應的元素和脂肪箭頭功能

Question

在Redux的實例中，所使用的語法是：

const App =() => (
    <div> 
    <AddTodo /> 
    <VisibleTodoList /> 
    <Footer /> 
    </div> 
) 

我用一個新的示例應用玩弄周圍和輸入錯誤用大括號而不是像這樣上面括號中的代碼：

const App =() => { 
    <div> 
    <AddTodo /> 
    <VisibleTodoList /> 
    <Footer /> 
    </div> 
} 

我控制檯登錄了以下兩個，結果看起來是一樣的。我的問題是這兩者之間的區別是什麼，以及爲什麼React像圓括號而不是大括號？

Answer 1

TL; DR

你的第一示例或多或少等價於：

var App = function() { return <div>...</div>; }; 

你的第二個是或多或少當量：

var App = function() { <div>...</div>; }; 

陣營大概抱怨在第二個例子中沒有返回任何東西。

稍長版

讓我們做出反應的方程。在ES6您可以創建一個胖箭頭函數是這樣的：

const getWord =() => { 
    return 'unicorn'; 
} 

我們正在給一個快捷方式做同樣的事情用更少的代碼：

const getWord =() => 'unicorn'; 

unicorn是，雖然你不」甚至還給任何地方都可以明確輸入return。

在第一個示例中，您將JSX放在括號中。在我們的例子相對應的是：

const getWord =() => ('unicorn'); 

或本

const getWord =() => (
    'unicorn' 
); 

最後四個例子是等價的。希望有所幫助！