第 16 课：提取组件后放置key

• 日期：2026-09-21
• 课程序号：第 16 课
• 知识点：提取组件后的 key 放置位置

用途或适用场景

提取列表项组件后，仍让 React 在数组生成处识别每一项。

核心概念

key 要放在 map 直接返回的 LessonItem 上；写在 LessonItem 内部的 <li> 上不能标识外层数组元素。

最小代码或操作示例

<ul>{lessons.map(item =>
  <LessonItem key={item.id} item={item} onRename={onRename} />
)}</ul>

3～5 分钟练习

尝试把 key 移到 LessonItem 内部的 <li> 上，判断列表警告能否消失。

参考答案

不能。map 直接返回的是 LessonItem，所以 key={item.id} 必须保留在 <LessonItem> 上。

与上一课的联系

沿用第 15 课提取出的 LessonItem({ item, onRename })；本课只明确 key 要放在 map 直接返回的组件上；完成练习后下一课可区分 React 使用的 key 与组件实际收到的课程 ID。

时效校验

时效校验：2026-09-24（React 19.3 官方教程；已核对“在数组中的 JSX 元素上直接提供 key”及提取组件后的放置规则，未见废弃说明）。

官方参考

• React 19.3：Rendering Lists