使用功能组件时使用大括号与圆括号制作组件

Posted 2023-02-21

【中文标题】使用功能组件时使用大括号与圆括号制作组件

【英文标题】：Making components with curly brackets versus parenthesis when using functional components

【发布时间】：2019-04-11 16:43:39

【问题描述】：

在 JSX 中制作函数式组件时使用大括号和圆括号有什么区别。我有一个名为 layout 的组件，它显示 props.children

但我想知道何时使用什么以及用于什么目的之间是否存在差异或最佳实践。

const layout = (props) => 
<Aux>
<div>Toolbar, SideDrawer, Backdrop</div>
<main>
    props.children
</main>
</Aux>

对

const layout = (props) => (
<Aux>
<div>Toolbar, SideDrawer, Backdrop</div>
<main>
    props.children
</main>
</Aux>
)

【问题讨论】：

Thie first 不应该工作，因为没有return。

这可能在 SO 上讨论过很多次。它特定于箭头函数语法，而不是 React。

Arrow functions and the use of parentheses () or or () 的可能重复项

【参考方案1】：

只有第二个 sn-p 是正确的。 => (...) 是隐式箭头函数返回。括号是为了可读性和与多行显式return 语句的一致性。可能是：

const layout = (props) => 
  <Aux>
  ...
  </Aux>

如果缩进适当且没有括号，悬挂缩进会使函数更难阅读。

为了让第一个 sn-p 起作用，应该有明确的箭头函数返回：

const layout = (props) => 
  return (
    <Aux>
    ...
    </Aux>
  )

请注意，如果 return 和 <Aux> 位于不同的行，则需要括号。