第 2 课：Props 组件传参

• 日期：2026-09-01
• 课程序号：第 2 课
• 知识点：Props、单向数据传递与组件复用

用途

让父组件把不同数据传给同一个子组件，复用界面结构。

核心概念

• Props 是父组件传入的只读参数。
• 子组件根据 Props 渲染，不直接修改传入值。

最小代码示例

function Greeting({ name }) {
  return <p>你好，{name}</p>;
}

export default function App() {
  return <Greeting name="小明" />;
}

3～5 分钟练习

增加 course 参数，显示“某人正在学习某课程”。

参考答案

function Greeting({ name, course }) {
  return <p>{name} 正在学习 {course}</p>;
}

与上一课的联系

上一课创建固定内容的函数组件；本课通过 Props 让组件接收外部数据。