第 8 课：map渲染列表与key

• 日期：2026-09-09
• 课程序号：第 8 课
• 知识点：数组 map 与 key

用途

根据课程数组生成一组结构一致的 React 元素。

核心概念

JSX 中可用 map 转换数组；同级列表项需要稳定且唯一的 key，帮助 React 识别项目。

最小代码或操作示例

const topics = [{ id: 1, name: '状态' }, { id: 2, name: '列表' }];
return <ul>{topics.map(topic => <li key={topic.id}>{topic.name}</li>)}</ul>;

3～5 分钟练习

增加第三项课程并让页面显示它。

参考答案

向数组添加 { id: 3, name: '表单' }，并保持 id 不重复。

与上一课的联系

上一课让单个输入框由状态控制；本课把一组数据转换成多个界面元素。