反應元素和胖箭頭功能

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>; };

React可能抱怨在第二個例子中沒有返回任何內容。

稍長版本

讓我們把React從等式中拿出來。 在es6中，您可以創建一個胖箭頭函數，如下所示：

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

而且我們有一條捷徑可以用更少的代碼做同樣的事情：

const getWord = () => 'unicorn';

即使您沒有在任何地方明確鍵入return也會返回unicorn 。

在您的第一個示例中，您將JSX包裝在括號中。 我們的簡單示例中的等價物是：

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

或這個

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

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