javascript - es6 箭头函数中的花括号代表每个

Question

这个问题已经有答案了:

Arrow function without curly braces (9 个回答)

已关闭 4 年前。

我们像这样创建展示组件或无状态组件

const MyComponent = () => {
   return(<div>my component</div>)
}

但我见过这个

const MyComponent = () =>
   <div>
     <h1>head</h1>
     my component
   </div>

所以现在我很困惑在使用es6的箭头函数时何时需要大括号。

这让我在使用 map 渲染列表时感到困惑

较短的版本

<div>
{map(o => 
   <div>{o.name}</div>
)}
</div>

加长版

<div>
    {map(o => {
     return(<div>{o.name}</div>)
     })}
</div>

两者都正确，但为什么要写更长呢？

Answer 1

{map(o => // without curly brackets 
   <div>{o.name}</div> // this will be returned implicitly
)}

{map(o => { // with curly brackets
    return <div>{o.name}</div> // you need to return explicitly
    } 
)}

如果你使用大括号，您必须明确返回数据，

When to use which one?

当你有多行执行时，你需要使用大括号并从中返回

但是如果你有单行执行，需要 return ，那么就不需要大括号和 return ，它会隐式返回。

Same as If condition

if(true)
    // do this for single line
else
    // do this for single line




if() {
    // do this for multiple line
} else {
    // do this for multiple line
}