使用功能组件时，使用大括号而不是括号来制作组件

Question

在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>
)

Answer 1

仅第二个片段正确。 => (...)是隐式箭头函数返回。括号内具有多行显式return语句的可读性和一致性。可能是：

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

具有适当的缩进且没有括号的悬挂式缩进使函数更难以阅读。

为了使第一个代码片段起作用，应该有明确的箭头函数return：

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

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