你可能会说
父组件的数据怎么传给子组件？总不能每个组件都自己 fetch 吧。
Props 是父组件向子组件传递数据的「只读参数」——让组件可配置、可复用。
父组件传给子组件的数据。像函数参数一样，让组件变得可复用——同一个按钮组件，传不同文字就显示不同内容。
生活类比
像填模板——模板格式固定，你填入不同的名字、日期，就生成不同的文件。
🎮 动手试试
👇 修改 Props 看子组件变化
关于「Props」，以下哪个描述最准确？
你可以这样告诉 AI
帮我设计 Button 组件的 Props：variant（primary/ghost）、size（sm/md/lg）、disabled、onClick，用 TypeScript interface 定义。
Props 从外部传入（只读），State 在内部管理（可变）。Props 变了组件重渲染。
Props 逐层传递，Context 跨层级共享。Props 传 3 层以上考虑用 Context。
组件数据传递
父组件通过 props 把标题、图片、回调函数等传给子组件，让同一个组件在不同场景复用。
和 AI 协作时
想让 AI 设计组件 Props 时，直接说「Button 组件接收 variant（primary/ghost）、size、disabled、onClick」。
全局共享数据
用户信息、主题、语言等跨多层组件的数据，用 Context 或状态管理库比逐层传 props 更方便。
与 React 无关的项目
用 Vue、Svelte、纯 HTML 的项目没有 React props 概念，对应的是各自框架的属性传递机制。
父组件传给子组件的数据。像函数参数一样，让组件变得可复用——同一个按钮组件，传不同文字就显示不同内容
像填模板——模板格式固定，你填入不同的名字、日期，就生成不同的文件。
AI 写的组件里 `function Button({ text, color })` 中的 tex