第 15 课2026.09.18
把单条课程的显示和更新按钮拆成可复用组件。
第 15 课：提取列表项组件
- 日期：2026-09-18
- 课程序号：第 15 课
- 知识点：提取列表项组件
用途或适用场景
把单条课程的显示和更新按钮拆成可复用组件。
核心概念
父组件继续持有 lessons 单一状态；LessonItem 只接收 item 与 onRename 回调。
最小代码或操作示例
text
function LessonItem({ item, onRename }) {
return <li>{item.title}<button onClick={() => onRename(item.id)}>重命名</button></li>;
}3～5 分钟练习
为组件增加删除回调。
参考答案
增加 onRemove prop，并在按钮中调用 onRemove(item.id)。
与上一课的联系
继承上一课按 id 更新数组状态；本课只提取列表项组件；完成后下一课可明确 map 返回组件时的 key 放置位置。
时效校验
时效校验：2026-09-21（React 19.3 当前官方指南；保留原课程日期与序号，已重新核对组件提取和 props 用法，未见废弃标记）。