javascript - 为什么我可以在 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>

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