React 中使用 JSX 遍历数据列表
在 React 开发中，将数组数据渲染为列表是非常基础且高频的场景。这里我们通过一个联系人列表的例子，演示如何利用 map 方法和 JSX 完成数据的迭代展示。
子组件定义
首先，我们创建一个独立的 Contact 组件来负责单个联系人的展示。这个组件接收一个 contact 对象作为 props，并从中提取姓名和电话进行渲染。
// src/Contact.js
import React from 'react';
class Contact extends React.Component {
render() {
console.log(this.props.contact);
return (
<li>
{this.props.contact.name} {this.props.contact.phone}
</li>
);
}
}
export default Contact;
列表容器与数据映射
在 ContactsList 中，我们需要接收外部传入的 contacts 数组。核心逻辑在于使用 JavaScript 的 map 方法遍历数组，并为每一项生成对应的 Contact 组件实例。
注意： 在 React 列表中，必须为每个元素提供唯一的 key 属性，这有助于 React 识别哪些项发生了变化、添加或移除，从而优化渲染性能。
// ContactsList.js
import React from 'react';
import Contact from './Contact';
class ContactsList extends {
() {
.(..);
(
);
}
}
;
