React 组件与 Props

React 组件与 Props

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

引言

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

动手

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

cd react2/02-components-props/demo
npm install
npm run 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 与事件