React中使用短路表达式动态添加类的副作用及优化方法

1. 短路&&写法的合理性评估 #

你提到的${index === i && "active-btn"}写法确实在不少早期教程中出现过，但不属于业内推荐的合理方案，核心问题就是你发现的副作用：条件不成立时会把false强制转为字符串插入类名，虽然大多数场景下不会直接触发样式问题，但属于明确的潜在隐患：

• 调试时DOM结构中会出现无意义的false类名，增加样式排查成本
• 极端场景下如果项目全局样式存在.false选择器，会导致意料之外的样式生效

2. 更优的实现方案 #

2.1 三目运算符写法（新手最易上手，优先推荐） #

你提到的${index === i ? "active-btn" : ""}是完全合规的更优方案，也是目前中小项目里最常用的写法，条件不成立时插入空字符串，不会产生多余类名，比短路写法更安全，代码可读性也足够。
完整示例代码：

<button
  key={job.id} 
  className={`job-btn ${index === i ? "active-btn" : ""}`} 
  onClick={() => setIndex(i)}
>
  {job.company}
</button>

2.2 数组过滤写法（多类名动态控制时更清晰） #

如果需要同时控制多个动态类名，可以用数组加filter的方式实现，自动过滤无效值：

className={[
  "job-btn",
  index === i && "active-btn",
  job.isDisabled && "disabled-btn"
].filter(Boolean).join(" ")}

filter(Boolean)会自动把所有false、undefined、null这类假值过滤掉，不会生成多余类名，多个类名的逻辑拆分更清晰。

2.3 类名工具库（中大型项目首选） #

如果项目类名动态逻辑非常复杂，可以使用专门处理类名拼接的classnames工具库，写法可读性和可维护性最高，是中大型React项目的通用最佳实践：

import classNames from 'classnames'

// 对象形式，key为类名，value为是否生效的条件
className={classNames("job-btn", {
  "active-btn": index === i,
  "disabled-btn": job.isDisabled
})}

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