className拼接需避免false值渲染为"false"，推荐用三元运算、数组filter+join或clsx库自动过滤无效值；响应式类名应作普通字符串拼接，勿误当对象键或遗漏空格。
用 className 拼接字符串最直接，但要注意空格和布尔值处理
React 中不能像 Vue 那样用 :class 响应式绑定对象，得靠 JS 表达式动态生成 className 字符串。常见错误是直接写 className={isActive && 'bg-blue-500'}，结果状态为 false 时渲染出 className="false"，导致样式异常。
正确做法是用逻辑运算符或三元配合模板字符串，确保只拼入有效类名：
const isActive = true;
const isDisabled = false;
// ✅ 推荐：用三元 + 空字符串兜底
<div className={`p-2 rounded ${isActive ? 'bg-blue-500 text-white' : 'bg-gray-200'} ${isDisabled ? 'opacity-50 cursor-not-allowed' : ''}`} />
// ✅ 或用数组 filter + join（适合类名多、逻辑复杂时）
<div className={['p-2', 'rounded', isActive && 'bg-blue-500', isDisabled && 'opacity-50'].filter(Boolean).join(' ')} />
用 clsx 库能省掉手动 filter(Boolean)
原生写法在类名多、条件嵌套深时容易出错。clsx 是轻量工具库（仅 0.3KB），专为解决这个问题设计，自动忽略 false、null、undefined、空字符串。
安装后直接导入使用：
立即学习“前端免费学习笔记（深入）”；
import clsx from 'clsx';
function Button({ isActive, size, variant }) {
return (
<button className={clsx(
'px-4 py-2 rounded',
isActive && 'bg-blue-600 text-white',
size === 'sm' && 'text-sm px-2 py-1',
variant === 'outline' && 'border border-blue-600 bg-transparent',
!isActive && 'opacity-70 cursor-default'
)}>
Click me
</button>
);
}
注意：clsx 不处理对象键为 false 的情况（如 { 'bg-red-500': false } 会被跳过），这点和 classnames 一致，但比手写安全得多。
避免在 className 里写内联计算逻辑，尤其是带副作用的
有人会把状态判断逻辑直接塞进 className，比如 className={user.role === 'admin' ? computeAdminClass() : 'user-class'}。问题在于每次渲染都执行 computeAdminClass()，可能触发重复计算、甚至意外调用 API 或修改 state。
更稳妥的做法是提前算好：
- 在组件顶部或
useMemo里计算最终类名字符串 - 把条件判断抽成独立函数，确保纯函数（无副作用、相同输入必得相同输出）
- 对频繁变化的状态（如输入框实时值），务必加
useMemo缓存类名，否则影响性能
const buttonClass = useMemo(() => {
if (isLoading) return 'bg-gray-400 cursor-wait';
if (isSuccess) return 'bg-green-500 hover:bg-green-600';
return 'bg-blue-500 hover:bg-blue-600';
}, [isLoading, isSuccess]);
Tailwind 的响应式类名和伪类要和状态组合好，别漏掉空格
响应式前缀（如 md:bg-red-500）和伪类（如 hover:text-blue-600）本质仍是类名，拼接规则完全一样。最容易踩的坑是忘记空格，或者把响应式类名当成对象 key 写错位置。
错误示例：
// ❌ 错误：md:xxx 和普通类名之间没空格，连成一个无效类
className={`p-2 ${isActive && 'md:bg-blue-500text-white'}`}
// ❌ 错误：把响应式当条件，实际它只是类名一部分
className={clsx({ 'md:bg-blue-500': isActive })} // 这样写没问题，但下面这句就错了
className={clsx({ 'md:bg-blue-500': isActive && 'text-white' })} // ❌ 'text-white' 是字符串，不是布尔值
正确写法始终把响应式类名当普通字符串参与拼接：
className={clsx(
'p-2',
isActive && 'bg-blue-500 text-white',
isActive && 'md:bg-blue-600 md:text-yellow-100', // ✅ 响应式类名和其他类名平级拼接
isHovered && 'hover:bg-blue-700'
)}
复杂交互中，伪类（hover:、focus:）和状态类（active:）本身不依赖 React state，它们由浏览器事件驱动；只有你主动用 state 控制的类（如 isDisabled）才需要动态绑定——这点常被混淆。
