每个[重复]的es6箭头函数中的花括号答案

【问题标题】：curly braces in es6 arrow function for each [duplicate]每个[重复]的es6箭头函数中的花括号
【发布时间】：2018-04-25 16:29:37
【问题描述】：

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

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

但我见过这个

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

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

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

更短的版本

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

更长的版本

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

两者都正确，但为什么要写更长的时间？

【问题讨论】：

见仁见智...有些人不明白，如果函数体是“简单”，那么=> 的缩写形式
不带大括号的版本返回=> 运算符后面的语句。带大括号的版本执行大括号内的代码块，并且不会自动返回任何内容。为清楚起见，人们会使用更长的版本，因为代码足够长，需要它。
这不是（只是）JavaScript。我认为它是 React 或类似的东西。请添加适当的标签。
@JLRishe 抱歉错过了反应
@JaromandaX 使用较短版本的缺点之一是您无法使用 console.log 进行调试。

标签： javascript reactjs ecmascript-6 jsx

【解决方案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
    } 
)}

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

什么时候用哪个？

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

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

与If条件相同

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
}

【讨论】：

if else 示例有帮助，谢谢
@estherJoo，是的，这很容易理解:)，很高兴有帮助。

【解决方案2】：

箭头函数可以双向工作，为您提供一些多功能性。假设您需要在返回之前在函数内部执行一些逻辑，在这种情况下您需要添加花括号，即您需要提取用户列表的名称，但您想附加他们的标题。

let users = [new User(), ... ];
//...

let withTitle = users.map(p => {
   const title = getTitle(p); // automagically returns Mr, Mrs, etc
   return `${title} ${p.fullName}`
});

// withTitle => ['Mr Ricky Bobby', 'Mr Ron Burgundy']

现在，您可以声明一个为您完成工作的函数，并使用箭头函数的简写版本。像这样。

const extractWithTitle: (user) => {
   const title = getTitle(p); // automagically returns Mr, Mrs, etc
   return `${title} ${p.fullName}`
}

let withTitle = users.map(p => extractWithTitle(p));
// withTitle => ['Mr Ricky Bobby', 'Mr Ron Burgundy']

现在，解决这个问题的更短的方法是传递对函数的引用。

users.map(extractWithTitle);

【讨论】：

【解决方案3】：

两者都正确，但为什么要写更长的时间？

如果您需要在箭头函数中添加更多句子而不是jsx 组件，则基本上需要使用更长的版本。

例如

<div>
    {map(o => {
       const name = "My name is: " + o.name;
       return(<div>{name}</div>)
     })}
</div>

否则，您可以使用短版。

【讨论】：