Question

我知道这里发生了什么，但我无法理解这里的地图功能它是如何工作的，请简要告诉我......

我在这里理解的是，map 函数获取 testData 数组的每个元素并调用函数“wow”显然 wow 函数将在此函数“wow”返回某些内容后存储映射值，因此它返回的是我感到困惑的是关于这里的语法...

{testData.map(wow => <Card {...wow}/>)}

const testData = [
    {name: "Dan Abramov", avatar_url: "https://avatars0.githubusercontent.com/u/810438?v=4", company: "@facebook"},
    {name: "Sophie Alpert", avatar_url: "https://avatars2.githubusercontent.com/u/6820?v=4", company: "Humu"},
    {name: "Sebastian Markbåge", avatar_url: "https://avatars2.githubusercontent.com/u/63648?v=4", company: "Facebook"},
];

const CardList = () => (
    <div>
    {testData.map(wow => <Card {...wow}/>)}
  </div>
);

class Card extends React.Component {
    render() {
    const profile = this.props;
    return (
        <div className="github-profile">
          <img src={profile.avatar_url} />
        <div className="info">
          <div className="name">{profile.name}</div>
          <div className="company">{profile.company}</div>
        </div>
        </div>
    );
  }
}

class App extends React.Component {
    render() {
    return (
        <div>
          <div className="header">{this.props.title}</div>
        <CardList />
        </div>
    );
  } 
}

ReactDOM.render(
    <App title="The GitHub Cards App" />,
  mountNode,
);

Answer 1

这里有几种简写语法，所以也许最清楚的方法是将函数写成长格式，然后在每一步重新缩短它并附上解释。

长格式：

{testData.map((wow) => {
  return <Card name={wow.name} avatar_url={wow.avatar_url} company={wow.company} />
})}

让我们从添加 wow 的 spread syntax 开始。当您想将对象的每个值作为 props 传递给组件时，您可以这样做：<Comp {...obj}/>。

这给我们留下了一个略短的版本，但仍然与原始含义相同：

{testData.map((wow) => {
  return <Card {...wow} />
})}

接下来我们有一个 implicit return，这意味着应该返回函数体内的所有内容。这使您可以去掉大括号 {} 并去掉 return 关键字。

{testData.map((wow) => <Card {...wow} />)}

最后，对于单参数箭头函数，您可以在函数声明中省略括号：

{testData.map(wow => <Card {...wow} />)}

总结：

wow 不是函数名，而是内联箭头函数的参数，它利用了几种简写语法。

map 为数组中的每个元素返回一个 Card 实例。数组的每次迭代都会为组件提供 wow 对象的所有值作为 props。

Answer 2

<块引用>

我这里的理解是map函数取testData数组的每个元素并调用一个函数“wow”显然wow函数会在这个函数“wow”返回后存储map值

这很接近，但并不完全正确。 map() 接受一个函数，但在这里您使用 => 语法，它是一个匿名函数。也就是说，该函数没有名称。 wow 这里是函数的单个参数的名称，而不是函数的名称。

map() 将 testData() 的每个元素传递给这个匿名函数。然后该函数返回一些东西。此返回值用作新数组中的元素，最终由 map() 返回。

映射函数与箭头函数反应

2 个答案: