在 React 应用里，通过什么方式可以根据状态或条件动态地修改组件的 class 属性，从而实现样式的切换？
考察说明
考查对 React 中条件渲染 class 的常用模式的理解及应用能力。
回答思路
- 【回答框架 1】在 React 中，class 是 JavaScript 的保留字，因此需要使用 className 属性来指定 CSS 类。动态改变 className 的核心是根据 state 或 props 的值，在渲染时拼接或选择字符串。
- 【回答框架 2】最简单的做法是使用模板字符串：`className={`item ${isActive ? 'active' : ''}`}`，通过三元运算符或逻辑与运算符动态添加类名。这种写法直观，适合类名较少的情况。
- 【回答框架 3】对于多个条件类名，可以使用数组的 join 方法：`className={['item', isActive && 'active', isDisabled && 'disabled'].filter(Boolean).join(' ')}`，这样避免多余的空白字符。
- 【回答框架 4】更推荐使用第三方库 classnames 或 clsx，它们提供了更清晰的 API，如 `classNames('item', { active: isActive, disabled: isDisabled })`，支持条件对象、数组等，能避免拼接错误，提升可读性。
- 【回答框架 5】若样式切换逻辑复杂或需要复用，可以将类名生成封装为函数或使用 CSS Modules，配合 styles 对象动态取值，如 `styles[isActive ? 'active' : 'inactive']`。
- 【关键点 1】React 中用 className 而非 class 来指定 CSS 类。
- 【关键点 2】动态类名常用的实现方式包括模板字符串、数组 join、classnames/clsx 库。
- 【关键点 3】类名生成逻辑应保持清晰，避免冗长的字符串拼接。
- 【关键点 4】CSS Modules 或预处理器时，注意动态类名映射的方式。
- 【易错点 1】忘记使用 className 而直接写 class 不会生效，且控制台会有警告。
- 【易错点 2】拼接字符串时未过滤掉 false 或 undefined，导致类名出现多余的空格或 'false' 字符。
- 【易错点 3】在循环中动态生成类名时，若类名依赖索引，需确保键的唯一性，避免更新渲染问题。