数据映射

好的，假设我们的客户关系管理（CRM）的数据保存在一个数组中，就像这样：

import ContactCard from './ContactCard';

const data = [
  {
    id: 'sunita-abc123',
    name: 'Sunita Kumar',
    job: 'Electrical Engineer',
    email: 'sunita.kumar@acme.co',
  },
  {
    id: 'henderson-def456',
    name: 'Henderson G. Sterling II',
    job: 'Receptionist',
    email: 'henderson-the-second@acme.co',
  },
  {
    id: 'aio-ghi789',
    name: 'Aoi Kobayashi',
    job: 'President',
    email: 'kobayashi.aoi@acme.co',
  },
]

function App() {
  return (
    <ul>
      <ContactCard
        name={"Name goes here"}
        job={"Job goes here"}
        email={"Email goes here"}
      />
    </ul>
  );
}

export default App;

Open Sandbox

我们想为 data 数组中的每个联系人创建一个 <ContactCard> 元素，并传入他们的姓名/职位/电子邮件。

在其他框架如 Vue 和 Angular 中，提供了用于迭代的特殊语法。然而，在 React 中，我们完全依赖 JavaScript。没有用于进行此类迭代的“React 语法”。

如果你想要冒险，花几分钟时间看看你能否找出解决这个问题的方法！如果你不确定也没关系。尝试一下，看看会发生什么！这是培养直觉的最佳方式。

我将在下面分享我的方法。

我的方法:

JavaScript Primer 附加模块有一些与这种方法相关的课程：

箭头函数
数组迭代方法（特别是 map 方法）

解决方案代码

括号与波浪线

这里有一个相当常见的句法陷阱。考虑以下代码：

return (
  <ul>
    {data.map((contact) => (
      <ContactCard
        name={contact.name}
        job={contact.job}
        email={contact.email}
      />;
    ))}
  </ul>
);

与使用括号 ( 和 ) 不同，我们正在使用波浪括号 { 和 } 。这似乎是个无伤大雅的改变，但在这里却造成了大问题：没有任何联系方式会显示出来！

发生了什么：为了渲染 <ContactCard> 元素，它们需要从 .map() 回调中返回。

我们可以通过添加 return 关键字来修复这个问题

return (
  <ul>
    {data.map((contact) => (
      return (
        <ContactCard
          name={contact.name}
          job={contact.job}
          email={contact.email}
        />
      );
    ))}
  </ul>
);

这是编写箭头函数的“长格式”方式。波浪括号为我们提供了空间来添加 1 个或多个 JavaScript 语句。我们需要使用 return 关键字来控制返回的内容。

箭头函数还有一种“简写”语法。在这种替代格式中，我们省略了花括号。我们只能传递一个单一的表达式，它会自动返回。括号是为了格式化的目的而添加的。

在 JavaScript 入门中的“箭头函数”👀课程中，我们对此进行了更深入的探讨。

JSX 在 JS 中的 JSX 内

当在 React 中进行迭代时，最终会出现这样的结构并不罕见：

<ul>
  {items.map((item) => (
    <li>{item}</li>
  ))}
</ul>

在第二行，我们使用花括号在 JSX 中添加一些“原生 JS”。但然后我们在那些花括号中使用 JSX！一些开发人员对这是“合法”的事实感到意外。

JSX 编译器能够解析“嵌套”JSX 调用，无需问题。最终结果类似于这样：

React.createElement(
  "ul",
  {},
  items.map((item) => React.createElement("li", {}, item)),
);

数据映射

提示

视频摘要

展开查看更多

JSX 在 JS 中的 JSX 内

On this page