Question

学习React并尝试欺骗这个codepen。我不了解FormCard中的map函数的两件事。

此.map函数为什么有一个return语句，但我没有看到其他示例的返回结果
为什么箭头函数使用花括号而不是像以前的箭头函数那样使用括号

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

通常

array.map((arg) => { return actionWith(arg) })
array.map((arg) => actionWith(arg))

相等，因此，如果开发人员仅获得回报，他们将缩小其功能

Answer 2

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

隐式返回：

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

[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.

为什么在此示例中Map会有return语句？

2 个答案: