反应元素和粗箭头功能

小编典典

reactjs

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

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

我正在玩一个新的示例应用程序，并用大括号（而不是像这样的括号）误输入了上面的代码：

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

我在控制台上记录了以下两个内容，结果似乎相同。我的问题是这两个之间有什么区别？为什么React像括号一样而不是大括号？

阅读 214

2020-07-22

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

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

2020-07-22