ZJY365 实战

组件 Component

「五张学生卡片长得一模一样,只有名字和分数不同。能不能只写一张卡片,其他复用?……」——新手术语卡:一句大白话需求 + 解释 + 可直接发给 AI 的指令。

你可能会说

五张学生卡片长得一模一样,只有名字和分数不同。能不能只写一张卡片,其他复用?

这是什么

组件是一段可以重复使用的页面结构:写一次学生卡片,五个学生都用它。改一处,五张卡同时更新。

这不是什么

组件不是复制粘贴五份代码。复制五份以后改一处忘四处,是新手最常见的坑。

发给 AI

把五张学生卡片改成一个可复用的组件,用数据列表渲染,保证以后加第六个学生只需要加一行数据。

← 前置:CSS 下一步:按钮 →

On this page