React 列表

学习列表渲染 · 难度：进阶 · +15XP

React 列表渲染

在 React 中，列表渲染是将数组数据转换为一组 JSX 元素的核心技术。React 使用 JavaScript 的 Array.map() 方法来遍历数组，为每个元素生成对应的 UI 组件。掌握列表渲染是构建动态界面的基础，无论是显示用户列表、商品清单还是新闻列表，都离不开这一技能。

使用 map() 渲染列表

map() 是 JavaScript 数组的内置方法，它遍历数组中的每一项并返回一个新数组。在 React 中，我们利用它来生成一组 JSX 元素。注意，列表中的每一项都需要一个唯一的 key 属性，这有助于 React 高效地更新和重排列表。

function FruitList() {
  const fruits = ['苹果', '香蕉', '橘子', '葡萄', '西瓜'];
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}
export default FruitList;

key 属性的重要性

渲染对象数组

实际开发中，我们渲染的通常是包含多个属性的对象数组，而不是简单的字符串或数字。每个对象代表一条完整的数据记录，我们可以提取其中的多个字段来构建丰富的卡片或列表项。

function UserList() {
  const users = [
    { id: 1, name: '张三', email: 'zhangsan@example.com', role: '管理员' },
    { id: 2, name: '李四', email: 'lisi@example.com', role: '编辑' },
    { id: 3, name: '王五', email: 'wangwu@example.com', role: '访客' },
  ];
  return (
    <div className="user-grid">
      {users.map(user => (
        <div key={user.id} className="user-card">
          <h3>{user.name}</h3>
          <p>邮箱: {user.email}</p>
          <span className="badge">{user.role}</span>
        </div>
      ))}
    </div>
  );
}

条件渲染与列表结合

在列表中经常需要根据条件显示不同的内容。你可以结合 filter() 过滤数据，也可以使用三元表达式或逻辑与运算符在 map() 内部做条件渲染。

1. 创建一个包含 5 个城市的数组，使用 map 渲染成一个有序列表
2. 将上一步的数组改为对象数组（包含城市名、省份、人口），渲染成表格
3. 在列表中添加一个搜索框，实现按城市名过滤的功能
4. 使用 filter 筛选出人口超过 500 万的城市并单独渲染
5. 为每个列表项添加一个删除按钮，点击后从列表中移除该条目