在 React 开发中，为什么给元素设置样式类名时使用 className 而不是 HTML 中的 class 属性？
考察说明
考查对 React 核心机制 JSX 语法与原生 DOM 属性差异的理解。
回答思路
- 【回答框架 1】React 使用 JSX 语法描述 UI，JSX 最终会通过 React.createElement 转换为 JavaScript 对象，而 class 是 JavaScript 的保留字，若在 JSX 中直接使用 class 会导致语法解析冲突，因此 React 选择使用 className 作为属性名。
- 【回答框架 2】从 DOM 属性角度看，原生 HTML 元素的 class 属性在 DOM API 中对应的是 className 属性（例如 element.className），React 在设计时为了与 DOM API 保持一致，也采用了 className。
- 【回答框架 3】React 官方在 JSX 规范中明确要求使用 className，这是 JSX 与 HTML 的一个语法差异点。对于 SVG 等元素，在 React 中也使用 className 而非 class。
- 【回答框架 4】虽然在某些场景下直接使用 class 可能不会立即报错，但为了遵循 JSX 规范并避免潜在问题，应始终使用 className。React 未来版本也可能会对 class 给出警告或错误。
- 【回答框架 5】在 React 组件中，className 可以接受字符串或动态拼接的表达式，这与原生 class 的用法相似，但书写上需要遵循 JSX 语法规则。
- 【关键点 1】class 是 JavaScript 保留字，JSX 中不能直接使用。
- 【关键点 2】DOM 原生属性对应为 className，React 与之一致。
- 【关键点 3】JSX 规范强制使用 className，保证跨环境一致性。
- 【关键点 4】className 可接受动态表达式，方便条件样式。
- 【关键点 5】遵循规范避免未来升级警告或错误。
- 【易错点 1】认为 class 在 JSX 中也能工作，混淆 HTML 与 JSX 语法。
- 【易错点 2】忽略 SVG 等元素同样需要 className。
- 【易错点 3】在动态拼接类名时忘记处理空值或条件，可能导致多余空格或无效类名。