React 组件与 Props前置React第一个 Vite 应用目标会拆组件会用 TypeScript 给 props 定类型。引言页面一大就该拆。组件是复用单位props是父传给子的只读数据。动手完整代码react2/02-components-props/democdreact2/02-components-props/demonpminstallnpmrun dev关键代码UserCard.tsxtype UserCardProps { name: string role: string years: number } export function UserCard({ name, role, years }: UserCardProps) { return ( article classNamecard h2{name}/h2 p classNamerole{role}/p p classNameyears从业 {years} 年/p /article ) }父组件传入不同 props得到三张卡片UserCard name小明 role前端 years{2} / UserCard name小红 role全栈 years{5} /运行截图记住props向下流动子组件不要偷偷改 props。需要变的数据放在拥有它的那一层的 state下一篇。TypeScript 的 props 类型能在编译期拦住拼写错误。下一篇State 与事件