第 17 课：区分 key 与课程 ID 属性

日期：2026-09-22
课程序号：第 17 课
知识点：key 不是普通 prop

用途或适用场景

列表项组件既要让 React 识别身份，也要在点击时知道课程 ID。

核心概念

React 使用 key 追踪列表身份，但不会把它传给子组件；子组件通过普通的 item.id 读取业务 ID。

最小代码或操作示例

jsx

function LessonItem({ item, onRename }) {
  return <li>{item.title}
    <button onClick={() => onRename(item.id)}>重命名</button>
  </li>;
}

export default function LessonList() {
  const lessons = [{ id: 'l1', title: 'React' }];
  const onRename = id => console.log(id);
  return <ul>{lessons.map(item =>
    <LessonItem key={item.id} item={item} onRename={onRename} />
  )}</ul>;
}

3～5 分钟练习

点击“重命名”，观察控制台输出。

参考答案

输出 l1；LessonItem 读取 item.id，不是 props.key。

与上一课的联系

沿用第 16 课的 LessonItem、lessons.map 与 key={item.id}；本课只明确同一 item.id 作为普通数据也要通过 item 传给子组件；完成后下一课可重排列表验证稳定 key 的身份作用。

时效校验

时效校验：2026-09-24（React 当前 Special Props Warning 与 Rendering Lists；key 不作为 prop 转发的规则未见废弃标记）。