【React】JSX 实现列表渲染

文章目录

- 一、基础语法
- - 1. 使用 `map()` 方法
  - 2. `key` 属性的使用
- 二、常见错误和注意事项
- - 1. 忘记使用 `key` 属性
  - 2. `key` 属性的选择
- 三、列表渲染的高级用法
- - 1. 渲染嵌套列表
  - 2. 条件渲染列表项
  - 3. 动态生成组件
- 四、最佳实践

在 React 开发中，列表渲染是一个非常常见的需求。无论是展示一组数据，还是动态生成组件，掌握列表渲染的技巧和最佳实践都是非常重要的。本文将详细介绍如何在 React 中使用 JSX 实现列表渲染，包括基础语法、常见错误以及高级用法，帮助你全面掌握这一技能。

一、基础语法

1. 使用 `map()` 方法

在 React 中，我们通常使用 JavaScript 的 map() 方法来迭代数组，并返回一个包含 JSX 元素的新数组。每个 JSX 元素都可以表示列表中的一项。

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =><li key={number.toString()}>{number}</li>
);const element = (<ul>{listItems}</ul>
);ReactDOM.render(element, document.getElementById('root'));

在这个示例中，numbers 数组中的每个元素都会被 map() 方法处理，并返回一个 li 元素。这些 li 元素通过 key 属性唯一标识。

2. `key` 属性的使用

key 是用于标识列表中每个元素的唯一性。它有助于 React 高效地更新和重新渲染列表。key 应该是一个在其兄弟元素之间唯一的字符串或数字。

const todos = ['Learn React', 'Build a React App', 'Deploy the App'];
const todoItems = todos.map((todo, index) =><li key={index}>{todo}</li>
);const element = (<ul>{todoItems}</ul>
);ReactDOM.render(element, document.getElementById('root'));

二、常见错误和注意事项

1. 忘记使用 `key` 属性

在渲染动态列表时，忘记添加 key 属性是一个常见错误。缺少 key 属性会导致 React 无法正确地识别和管理元素的变化。

// 错误示例：缺少 key 属性
const listItems = numbers.map((number) =><li>{number}</li>
);

2. `key` 属性的选择

key 属性应该尽可能唯一且稳定，不要使用数组的索引作为 key，因为当列表项重新排序时，索引会改变，从而导致潜在的渲染问题。

// 不推荐的做法：使用数组索引作为 key
const listItems = todos.map((todo, index) =><li key={index}>{todo}</li>
);// 推荐的做法：使用唯一标识符作为 key
const todos = [{ id: 1, text: 'Learn React' },{ id: 2, text: 'Build a React App' },{ id: 3, text: 'Deploy the App' }
];const todoItems = todos.map((todo) =><li key={todo.id}>{todo.text}</li>
);

三、列表渲染的高级用法

1. 渲染嵌套列表

在实际应用中，可能需要渲染嵌套列表。例如，渲染一个包含多个子项的分类列表。可以通过递归方式处理嵌套数据结构。

const categories = [{id: 1,name: 'Fruits',items: ['Apple', 'Banana', 'Orange']},{id: 2,name: 'Vegetables',items: ['Carrot', 'Broccoli', 'Spinach']}
];const CategoryList = ({ categories }) => (<ul>{categories.map(category => (<li key={category.id}>{category.name}<ul>{category.items.map(item => (<li key={item}>{item}</li>))}</ul></li>))}</ul>
);ReactDOM.render(<CategoryList categories={categories} />, document.getElementById('root'));

2. 条件渲染列表项

在渲染列表时，可以根据条件有选择地渲染特定的列表项。

const tasks = [{ id: 1, text: 'Do the dishes', completed: false },{ id: 2, text: 'Take out the trash', completed: true },{ id: 3, text: 'Mow the lawn', completed: false }
];const TaskList = ({ tasks }) => (<ul>{tasks.filter(task => !task.completed).map(task => (<li key={task.id}>{task.text}</li>))}</ul>
);ReactDOM.render(<TaskList tasks={tasks} />, document.getElementById('root'));

3. 动态生成组件

在列表渲染中，可以动态生成组件。例如，渲染一组自定义组件，每个组件都代表列表中的一项。

const products = [{ id: 1, name: 'Laptop', price: 999.99 },{ id: 2, name: 'Phone', price: 799.99 },{ id: 3, name: 'Tablet', price: 499.99 }
];const Product = ({ product }) => (<div><h2>{product.name}</h2><p>Price: ${product.price}</p></div>
);const ProductList = ({ products }) => (<div>{products.map(product => (<Product key={product.id} product={product} />))}</div>
);ReactDOM.render(<ProductList products={products} />, document.getElementById('root'));