数据映射
对数据进行映射
好的,假设我们的客户关系管理(CRM)的数据保存在一个数组中,就像这样:
我们想为 data 数组中的每个联系人创建一个 <ContactCard> 元素,并传入他们的姓名/职位/电子邮件。
在其他框架如 Vue 和 Angular 中,提供了用于迭代的特殊语法。然而,在 React 中,我们完全依赖 JavaScript。没有用于进行此类迭代的“React 语法”。
如果你想要冒险,花几分钟时间看看你能否找出解决这个问题的方法!如果你不确定也没关系。尝试一下,看看会发生什么!这是培养直觉的最佳方式。
我将在下面分享我的方法。
我的方法:
JavaScript Primer 附加模块有一些与这种方法相关的课程:
- 箭头函数
- 数组迭代方法(特别是 map 方法)
解决方案代码
括号与波浪线
这里有一个相当常见的句法陷阱。考虑以下代码:
与使用括号 ( 和 ) 不同,我们正在使用波浪括号 { 和 } 。这似乎是个无伤大雅的改变,但在这里却造成了大问题:没有任何联系方式会显示出来!
发生了什么:为了渲染 <ContactCard> 元素,它们需要从 .map() 回调中返回。
我们可以通过添加 return 关键字来修复这个问题
这是编写箭头函数的“长格式”方式。波浪括号为我们提供了空间来添加 1 个或多个 JavaScript 语句。我们需要使用 return 关键字来控制返回的内容。
箭头函数还有一种“简写”语法。在这种替代格式中,我们省略了花括号。我们只能传递一个单一的表达式,它会自动返回。括号是为了格式化的目的而添加的。
在 JavaScript 入门中的“箭头函数”👀课程中,我们对此进行了更深入的探讨。
JSX 在 JS 中的 JSX 内
当在 React 中进行迭代时,最终会出现这样的结构并不罕见:
在第二行,我们使用花括号在 JSX 中添加一些“原生 JS”。但然后我们在那些花括号中使用 JSX!一些开发人员对这是“合法”的事实感到意外。
JSX 编译器能够解析“嵌套”JSX 调用,无需问题。最终结果类似于这样: