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

Posted 2023-02-21

【中文标题】每个[重复]的es6箭头函数中的花括号

【英文标题】：curly braces in es6 arrow function for each [duplicate]

【发布时间】：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 进行调试。

【参考方案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>

否则，您可以使用短版。