为什么我可以在 React 中省略带括号的 return 语句

Question

React 的新手，有一个潜在的愚蠢问题。

我怎么可能省略带括号的 Reacts 返回语句。

const Nav = () => (
  <nav className="c_navbar">
    { some jsx magic here }
  </nav>
)

而我看到其他这样的情况：

const Nav = () => {
  return (
    <nav className="c_navbar">
      { some jsx magic here }
    </nav>
  )
}

据我了解()返回对象文字时的帮助，以便它不会将其与代码块混淆。但我不认为这适用于这里？

谢谢

Answer 1

第一个片段是隐式返回。提供括号只是为了方便开发者；以可读性为代价，可以在没有它们的情况下明确解析代码：

const Nav = () =>
  <nav className="c_navbar">
    { some jsx magic here }
  </nav>

而第二个片段包含显式返回。这就是 React 中常用的括号的情况，因为当return语句之后没有可选表达式时，就没有返回值。

  return
    <nav className="c_navbar">
      { some jsx magic here }
    </nav>

被解析为

  return;
  <nav className="c_navbar">
    { some jsx magic here }
  </nav>

为了在没有括号的情况下正确解析，它应该是：

  return <nav className="c_navbar">
    { some jsx magic here }
  </nav>

因此括号通常用于隐式和显式返回的一致性，并允许通过适当的缩进提高可读性。

Answer 2

这是一个 JavaScript 问题，而不是一个 React 问题。

\n\n

1) 箭头函数中使用括号()返回一个对象。

\n\n

() => ({ name: \'Amanda\' })  // Shorthand to return an object\n

\n\n

这相当于

\n\n

() => { // Block body\n   return { name : \'Amanda\' }\n}\n

\n\n

\n
2. 括号还用于将 JavaScript 返回语句上的多行代码分组，以防止分号自动插入到错误的位置。
\n

\n\n

\r\n

\r\n

() => ({ name: \'Amanda\' })  // Shorthand to return an object\n

\r\n

\r\n

\r\n

\n\n

为什么？当您将左括号与 return:\nreturn (\n您告诉 JavaScript 引擎它可以\xe2\x80\x99t 自动插入分号，直到括号关闭为止。

\n\n

对于单行语句，我们不需要将其括在括号内。

\n\n

\r\n

\r\n

() => { // Block body\n   return { name : \'Amanda\' }\n}\n

\r\n

\r\n

\r\n

\n\n

更多信息可以在这里找到： https://medium.com/@leannezhang/curly-braces-versus-parenthesis-in-reactjs-4d3ffd33128f

\n

Answer 3

它不是一种特别的反应语法，而是一种 JavaScript 语法。箭头函数声明有两种主体类型

1. 简洁的正文 - 隐式返回值。
2. 块体 - 需要显式return。

有关更多信息，请参阅MDN 文档。