React中设置className时引号内用花括号加点击类名报错如何解决

• 原有代码的错误来自三个问题：
  1. 三元表达式外层多套了一层{}，在JSX的{}插值内部，这层额外的{}会被识别为对象字面量，无法直接和字符串拼接
  2. 非激活状态返回null，拼接时会被转为字符串"null"，最终会出现不符合预期的collapsenull类名
  3. 两个类名之间没有预留空格，激活状态会直接拼接成collapseexpand，无法识别为两个独立类

方案1：调整原有字符串拼接逻辑 #

把三元表达式用括号包裹，非激活状态返回空字符串，同时给expand前加空格即可：

className={"collapse" + (active ? " expand" : "")}

方案2：模板字符串写法（更推荐，可读性更高） #

用ES6模板字符串直接插值，逻辑更清晰，不容易漏空格：

className={`collapse ${active ? "expand" : ""}`}

方案3（多类名场景可选） #

如果项目中需要频繁处理动态类名，可以使用classnames工具库，写法更简洁易维护：

import classNames from 'classnames'
// 调用时传入对象，key为类名，value为是否生效的布尔值
className={classNames('collapse', { expand: active })}

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