跳转到内容
mCourse

组件化与状态反馈

你将学会什么

Section titled “你将学会什么”
  • 用 hover:、focus:、disabled: 等前缀表达交互状态
  • 判断什么时候该把重复样式抽成组件
  • 建立「页面层传数据、组件内部用原子类」的分层习惯

正文

Section titled “正文”

课程项目里最常见的交互状态其实就几类：悬停、聚焦、禁用、加载、选中。Tailwind 已经把这些状态封装好了，你需要的只是记住状态前缀：

<button class="bg-indigo-600 px-4 py-2 text-white rounded-lg hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-400 disabled:opacity-50">
  提交作业
</button>

hover:bg-indigo-500 表示悬停时变浅，focus:ring-2 表示聚焦时出现外圈提示，disabled:opacity-50 表示禁用时半透明。在课程展示、实验报告前端、课程大作业里，这类按钮会反复出现。你写得越规范，老师和队友越容易看懂你的交互逻辑。

组件化方面，不是“一开始就要抽组件”，而是“重复到第三次时就应该抽”。一个实用的思路是：

  • 先按页面快速排布
  • 再把重复出现的区块抽成组件
  • 最后只允许组件内部使用原子类，页面层只负责传数据和组合组件

这样以后改风格时，你只需要改组件，不需要在几十个页面里逐个替换类名。

动手练

Section titled “动手练”

知识检查

Section titled “知识检查”

先自己回答，再看答案：

  1. hover: 和 focus: 前缀分别对应什么状态？
  2. 什么时候应该把重复的类组合抽成组件？
  3. 组件化之后，页面层应该负责什么？
参考答案
  1. hover: 对应鼠标悬停，focus: 对应键盘或点击聚焦。
  2. 同一段类组合重复到第三次时，就该考虑抽成组件。
  3. 页面层只负责传数据和组合组件，原子类只允许出现在组件内部。

本节小结

Section titled “本节小结”
  • 状态前缀：hover:、focus:、disabled:，按前缀理解交互逻辑
  • 抽组件时机是“重复到第三次”，避免过早抽象
  • 分层原则：页面层传数据，组件内部用原子类，改风格只改组件
组件化与状态小测
x
1 / 3

页面卡片重复出现三次时，最合理的下一步是？