Props 属性

Props

前端工程也叫：属性、组件参数、入参

一句话：父组件传给子组件的数据，就像给函数传参数，子组件只读不改，用它决定自己显示什么。

详细解释

把组件想成一台咖啡机，Props 就是你按下的选项：大杯还是中杯、加不加糖。同一台机器，选项不同，做出来的咖啡就不同。比如 <Button type="primary" text="提交" /> 里的 type 和 text 就是 Props。

Props 的数据是单向流动的：从父组件流向子组件。子组件不应该直接修改收到的 Props，想改的话，由父组件传一个回调函数（比如 onChange）下来，子组件调用它通知父组件去改。

和状态的区别：Props 是外面给的，状态是组件自己记的。一个数据要经过很多层组件往下传时，叫「Props 层层透传」，可以考虑改用全局状态或 Context。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

把 UserCard 组件里写死的头像、名字和简介改成通过 Props 传入，并用 TypeScript 定义 Props 类型，其中简介是可选的，没传时不显示。再在列表页用这个组件渲染三个不同的用户。