Reactjs 使用功能组件时使用花括号制作组件与使用括号制作组件

在JSX中制作功能组件时使用花括号和括号有什么区别。我有一个名为layout的组件，它显示

props.children

但我想知道什么时候使用什么和为了什么目的使用什么之间是否有区别或最佳实践

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

const布局=（道具）=>{
工具栏、侧抽屉、背景
{props.children}
}

对

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

const布局=（道具）=>(
工具栏、侧抽屉、背景
{props.children}
)

只有第二个片段是正确的<代码>=>（…）是隐式箭头函数返回。括号用于可读性和与多行显式

return

语句的一致性。它可以是：

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

const布局=（道具）=>
...

如果缩进正确且没有括号，挂起的缩进会使函数更难阅读

为了使第一个代码段正常工作，应该有显式的arrow函数return：

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

const布局=（道具）=>{
返回(
...
)
}

---

请注意，如果

return

和

在不同的行上，则需要使用括号。

由于没有

return

，因此首先不应该使用括号。这可能已经讨论过很多次了。它特定于箭头函数语法，而不是React。可能重复