React 组件与 Props

React 组件与 Props

前置：React：第一个 Vite 应用
目标：会拆组件，会用 TypeScript 给 props 定类型。

引言

页面一大就该拆。组件是复用单位；props是父传给子的只读数据。

动手

完整代码：react2/02-components-props/demo

cdreact2/02-components-props/demonpminstallnpmrun dev

关键代码

UserCard.tsx：

type UserCardProps = { name: string role: string years: number } export function UserCard({ name, role, years }: UserCardProps) { return ( <article className="card"> <h2>{name}</h2> <p className="role">{role}</p> <p className="years">从业 {years} 年</p> </article> ) }

父组件传入不同 props，得到三张卡片：

<UserCard name="小明" role="前端" years={2} /> <UserCard name="小红" role="全栈" years={5} />

运行截图

记住

• props向下流动；子组件不要偷偷改 props。
• 需要变的数据放在拥有它的那一层的 state（下一篇）。
• TypeScript 的 props 类型能在编译期拦住拼写错误。

下一篇

State 与事件