Question

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

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>

两者都是正确的，但为什么写得更长？

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

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

何时使用哪一个？

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

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

与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
}

Answer 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);

Answer 3

两者都是正确的，但为什么写得更长？

如果您需要在jsx组件以外的箭头功能中添加更多句子，则基本上需要使用更长的版本。

E.g。

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

否则，您可以使用简短版本。

每个es6箭头函数的花括号

3 个答案: