← FC Coder · HomePhase 02 · Lesson 17 · 60 min
Lesson17
Phase Two · Fantasy Builder · Matchday 17 · Props

Props
穿在组件身上的数据

Today's 3 Jobs · 今天这三件事
  1. 01
    改 PlayerCard 接收 { player } props
    function PlayerCard({ player })
  2. 02
    .map 里 <PlayerCard player={p} key={p.name} />
    22 张不同球员
  3. 03
    加 isSelected 多 prop · 评分高的金边
    isSelected={p.rating >= 90}

上节课 22 张全是哈兰德 —— 因为 PlayerCard 写死。今天 props 进场 —— <PlayerCard player={p} />。球衣形状不变 · 印不同名字。Phase 2 无新本质点(props = 函数参数复用),但今天 22 张终于变成不同球员。

Essence · 函数参数的复用

props = 给组件传数据

Phase 1 函数有参数(byRating(min))· 组件也有参数(传 player props)· 本质一回事。

Chalk Board · 接收 + 传递
function PlayerCard({ player, isSelected }) {
return ( <article> ... {player.name} ... </article> );
}
接收
function PlayerCard({ player })
传递
<PlayerCard player={p} />
多个
player + isSelected · 空格分

解构是现代姿势 —— 比 props.player 短。Cursor 所有示例都这样写。

Roster · 今天 3 个新工具

props · 解构 · 表达式 props

抄着用 · 看 22 张终于各不同 · 加 isSelected 综合 if 思想。

  1. 01
    <PlayerCard player={p} />
    穿在组件身上的数据 —— 球衣形状不变 · 印不同名字 / 号码。
    多个 props 用空格分。boolean 用 isSelected={true} 不要双引号。
  2. 02
    function PlayerCard({ player })
    解构接收 —— 传进来一个对象 · 只取里面 player 这个 key。
    比 props.player 短 · 现代 React 共识。
  3. 03
    isSelected={p.rating >= 90}
    props 接表达式 —— 评分高的传 true,否的传 false。
    Phase 1 if 思想 + Phase 2 props 综合。
预览 · 11 号福登

一张 PlayerCard · 收第二个球员的 props

本课页面里我直接渲染一张给你看 —— 你也会在 sandbox 里见到 22 张。

福登

LW · 评分 87

英国 · 曼城

Half 2 · 在屏幕上

改 PlayerCard 接收 props · 22 张终于各不同

做完一步就点 ✓。Step 4 那一刻 22 张分开是今天的「哇」。

01改 PlayerCard 接收 props
01Min

Cursor + pnpm dev

老三件套。
02Min

改 PlayerCard 为 function PlayerCard({ player }) { ... }

组件 return 里所有写死的「哈兰德」「91」「ST」等改成 {player.name} / {player.rating} / {player.position} / {player.nationality} / {player.club}。保存。
03Min

浏览器报错 · TypeError player undefined

sandbox 里 <PlayerCard /> 没传 player。让他看 Cursor + 浏览器红字。「组件想要 player 你没给」。修在下一步。
02🌟 .map 传 player · 22 张各不同
04Min

🌟 sandbox .map 传 player + key

{players.map(p => <PlayerCard player={p} key={p.name} />)}。保存 · 22 张不同球员卡。今天的「哇」。
05Min

单独一张 · <PlayerCard player={players[0]} />

.map 上面手写一张。证明组件 + props 单独也能用 · 不必在 .map 里。
03加 isSelected · 综合 if + props
06Min

PlayerCard 加 isSelected 第二个 prop

function PlayerCard({ player, isSelected }) { ... const borderClass = isSelected ? '金边' : '普通边'; ... <article className={`... ${borderClass}`}>。三元 ?: 抄着用。保存。
07Min

测试 · isSelected={true} vs {false}

<PlayerCard player={players[0]} isSelected={true} /><PlayerCard player={players[1]} isSelected={false} />。第 1 张金边 · 第 2 张普通。
08Min

🌟 .map 里 isSelected={p.rating >= 90}

评分高的金边 · 综合 Phase 1 if 思想 + Phase 2 props。改 22 张 .map。保存 · 哈兰德 / 罗德里 / 姆巴佩 / 凯恩等金边。
04玩 · 截图
09Min

玩 5 分钟 · 加更多 props

试 face prop 接收 emoji / size prop 接收 'large'。在 .map 给所有传 face="⚽"。
10Min

📸 截图

存 2026-XX-XX-22张不同球员.png · Phase 2 第二张战利品。
Half Time · 中场 · 讲给爸爸听

4 题 · 重点:props = 球衣

第 4 题让他讲表达式 props 的综合性。

01什么是 props?用「球衣」的比喻讲。Hint ↓

穿在组件身上的数据。球衣形状不变 · 印的名字 / 号码不同。

02function PlayerCard({ player }) 里 { player } 是什么?Hint ↓

解构 · 传进来一个对象 · 我只取 player 这个 key。比 props.player 短。

03<PlayerCard player={p} /> 里 {p} 是什么?Hint ↓

JSX 大括号 · 钻回 JS · 把变量 p 传进去。

04isSelected={p.rating >= 90} 做什么?Hint ↓

评分高传 true 否传 false。isSelected 决定金边。Phase 1 if 综合 Phase 2 props。

Player Rating · 本课温度计

给「props 进场」打个分

说真话。爸爸会看到。

今天难度Difficulty
0
今天开心Fun
0
Final Whistle · 终场哨

22 张终于变成不同球员 —— PlayerCard 接收数据成功。

还有 10 步没打勾。Step 4 看到 22 张不同那一刻今天就过 —— 其他下次补。

Next · Lesson 18 · 事件 + 点击 →