javascript - 为什么这个例子中Map有一个return语句？

Question

学习 React 并试图欺骗这个 codepen 。我不明白 FormCard 中 map 功能的两件事。

1. 为什么这个.map函数有一个return声明，我没有看到其他示例的返回

2. 为什么箭头函数使用大括号而不是像之前的箭头函数那样使用括号

const FormCard = (props) => (

  const FormCard = (props) => (
  <div>
    {
      DATA.map((props) => {
        return <div style={{...largebox, ...flex}} key={props.id}>
          <div style={{...Photo,backgroundImage: `url(${props.photo})`}}></div>
          <div>
            <Author author={props.author}/>
            <Something bio={props.bio}/>
            <AdBox adpic={props.adpic} />
            <IconBox />
          </div>
      </div>
      })
    }
  </div>
)

Answer 1

这是从箭头函数返回的两种不同方式。

隐式返回:

如果主体以表达式开头而不是以 { 开头，则被视为要返回的值。

[0,1,2,3,4,5,6].map(v => ({value:v})); // gives an array of objects with value set to v. 
[0,1,2,3,4,5,6].map(v => v*v)// gives an array of squares of the initial array. 

显式返回:

如果主体以 { 开头，则它被视为函数主体，并且预计会返回 return 语句。

[0,1,2,3,4,5,6].map(v => { return {value:v}}); // gives an array of objects with value set to v. 
[0,1,2,3,4,5,6].map(v => { return v*v})// gives an array of squares of the initial array.