在className中直接编写条件UI样式逻辑是否为良好实践？

你现在用的模板字符串内堆多个&&判断拼接类名的写法，不属于前端开发推荐的良好实践。除了你提到的可读性差、维护不便的问题外，这种写法还存在潜在bug：当&&前的判断条件返回falsy值时，false、0这类值可能被拼接到最终的class字符串里，还会产生很多无意义的多余空格，后续新增状态、调整样式时，很容易在大段模板字符串里改漏、写错。

推荐的替代实现方案 #

1. 零依赖：状态样式映射表（最通用，推荐优先用） #

把状态和对应样式的映射关系抽离为独立常量，通用布局类名也单独抽离，和业务状态样式解耦：

// 状态-样式映射集中管理，新增/修改状态样式只需要改这一处
const INVITE_STATUS_STYLE = {
  active: "bg-green-50 text-success",
  pending: "bg-yellow-50 text-yellow-400",
  expired: "bg-slate-50 text-slate-400",
  rejected: "bg-purple-50 text-purple-500 mr-44",
  cancelled: "bg-red-50 text-red-500 mr-44"
}
// 通用布局类名单独维护，不和状态逻辑混写
const COMMON_TAG_STYLE = "ml-14 px-4 py-1 font-medium rounded-md mr-4"

// JSX中直接取值拼接即可
className={`${INVITE_STATUS_STYLE[cell.row.original.invite_status] ?? ""} ${COMMON_TAG_STYLE}`}

这种写法的优势：

• 所有状态样式规则集中存放，找对应样式、加新状态不需要翻JSX结构
• 没有冗余的条件判断，不会出现falsy值混入class字符串的问题
• 后续如果要对接TS枚举、做类型约束，直接和这个映射表绑定即可，类型校验链路更顺畅

2. 配合类名工具简化写法（项目已有相关依赖时用） #

如果项目里已经引入了clsx、classnames这类专门处理类名拼接的工具库，可以配合映射表进一步简化代码，工具会自动过滤falsy值、处理多余空格，不需要手动做空值兜底：

className={clsx(
  COMMON_TAG_STYLE,
  INVITE_STATUS_STYLE[cell.row.original.invite_status]
)}

3. 复杂场景收敛为工具函数 #

如果后续状态样式逻辑变复杂，比如需要叠加用户权限、页面场景等判断条件，可以把所有类名计算逻辑抽成独立的工具函数，JSX中只保留函数调用即可：

// 工具函数统一收敛所有判断逻辑
const getInviteTagClass = (status, isAdmin = false) => {
  const baseClass = COMMON_TAG_STYLE
  const statusClass = INVITE_STATUS_STYLE[status] ?? ""
  const adminExtraClass = isAdmin ? "border border-current" : ""
  return `${baseClass} ${statusClass} ${adminExtraClass}`
}

// JSX中使用
className={getInviteTagClass(cell.row.original.invite_status, currentUser.isAdmin)}

补充说明 #

不是所有内联在className里的条件判断都不能用：如果只有1-2个简单的互斥判断（比如单个布尔值控制一个类名是否生效），直接写三元、&&是完全没问题的。但一旦判断条件超过3个、或者存在多状态映射的场景，就不要把大段逻辑堆在JSX属性里，优先抽离映射或逻辑函数。

内容的提问来源于stack exchange，提问作者Rakul Agn