React元素和箭头函数

Question

在 Redux 的示例中，使用的语法如下：

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

我正在尝试开发一个新的示例应用程序，结果在上述代码中将圆括号错误地写成了花括号，如下所示：

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

我在控制台记录了下面两个内容，结果似乎是相同的。我的问题是这两者之间有什么区别，为什么React喜欢括号而不是花括号？

- MCaw

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

最后四个例子是等价的。希望这能帮到你！

- Aaronius

---

非常有帮助，谢谢。在阅读了您的回复后，我查看了MDN文档，现在理解更加透彻了。 - MCaw