反应元素和胖箭头功能

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

即使您未在任何地方明确键入unicorn，也会返回

return。

在您的第一个示例中，您将JSX包装在括号中。我们的简单示例中的等价物是：

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

或者

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

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