为什么在 React 中使用 `className` 而不是 `class`？

简单直接的回答是：因为 class 是 JavaScript 中的保留关键字，而 JSX 是 JavaScript 的语法扩展。为了避免歧义和语法解析错误，React 选择了使用 className 来定义 HTML 的 class 属性。

下面我们从多个角度进行深入详细的解释。

1. 根本原因：JavaScript 保留关键字

这是最核心、最根本的原因。

• 在 JavaScript 中：class 关键字用于声明一个类（ES6 引入的类语法）。

  // 这是一个 JavaScript 类声明
  class MyComponent extends React.Component {
    // ... 类的内容
  }
  

• 在 HTML 中：class 是一个属性，用于为元素指定 CSS 类名。

  <!-- 这是 HTML -->
  <div class="my-css-class"></div>
  

JSX 的本质：JSX 不是字符串也不是 HTML，它最终会被编译（由 Babel 等工具）成普通的 JavaScript 对象（React.createElement 调用）。因为 JSX 嵌入在 JavaScript 代码中，编译器必须能够清晰无误地区分代码中的 class 是要定义一个 JavaScript 类，还是要定义一个 HTML 的 class 属性。

如果在 JSX 中使用 class，编译器会感到困惑，无法确定其意图，从而导致语法错误。

// 错误的写法：这会导致 JS 解析错误
function Component() {
  return <div class="my-class">Content</div>; // ❌ 这里的 'class' 与 JS 关键字冲突
}

为了解决这个冲突，React 团队选择了 className 作为替代方案。这个名称来自于 DOM API（例如 element.className），因此对于开发者来说也并非完全陌生。

// 正确的写法
function Component() {
  return <div className="my-class">Content</div>; // ✅
}

编译后，className 会作为 React.createElement 的一个属性对象（props）的键，最终在渲染到真实 DOM 时，React 会将其转换为正确的 class 属性。

2. 历史渊源：DOM API 的影响

React 的设计在很大程度上受到了浏览器原生 DOM JavaScript API 的影响。在操作 DOM 时，我们是通过对象的属性来进行的。

• 在原生 JS 中，要获取或设置一个元素的 class，使用的属性是 className（因为 class 是保留字而不能用）。

  // 原生 JavaScript 操作 DOM
  const element = document.getElementById('myElement');
  element.className = 'new-class'; // 使用 className 属性
  

• 而用于获取元素类列表的较新 API 则叫做 classList。

  element.classList.add('another-class');
  

React 的 className 属性与原生 JS 中的 element.className 是对应的，这种一致性降低了开发者的学习成本。你实际上是在设置 DOM 节点的 className 属性，而不是在写 HTML 字符串。

3. React 的哲学：一致性

React 的 JSX 语法旨在提供一种更接近于 JavaScript 而非 HTML 的编写体验。几乎所有 JSX 属性都使用驼峰命名法（camelCase）来与 JavaScript 的命名风格保持一致，而不是 HTML 的属性命名风格（小写）。

比较一下常见的属性名：

这种统一的驼峰命名规则使得 JSX 的属性列表在 JavaScript 的上下文中看起来更加自然和一致。

4. 常见误区与解答

Q：为什么 Vue 和 Angular 的模板里可以直接用 class？
A： Vue（.vue 文件）和 Angular 的模板是基于 HTML 的语法。它们有自己专门的模板编译器，这些编译器在处理模板时，能够明确区分模板中的 class 和脚本部分（<script>）中的 JavaScript 代码 class。而 JSX 是混合在 JavaScript 代码中的，它共享同一个语法作用域，因此必须遵守 JavaScript 的规则。

总结对比

实际代码示例

import React from 'react';

function App() {
  const isActive = true;
  const error = false;

  // 动态设置 className（非常常见的模式）
  const buttonClass = `btn ${isActive ? 'btn-active' : ''} ${error ? 'btn-error' : ''}`;

  return (
    <div>
      {/* 1. 基本使用 */}
      <h1 className="title">Hello World</h1>

      {/* 2. 动态拼接 className（推荐使用模板字符串或库） */}
      <button className={buttonClass}>Click Me</button>

      {/* 3. 内联条件判断 */}
      <div className={`menu ${isActive ? 'show' : 'hide'}`}>
        Menu Content
      </div>

      {/* 4. 使用第三方库（如 classnames）来更好地管理条件类 */}
      {/* 假设已安装 classnames 库 */}
      {/* <div className={classNames('menu', { 'show': isActive, 'hide': !isActive })}> */}

    </div>
  );
}

export default App;

最佳实践建议：对于复杂的条件 className 拼接，强烈推荐使用专门的辅助库，如 classnames。它能让你的代码更清晰、更易维护。

npm install classnames

import classNames from 'classnames';

function Component({ isPrimary, size }) {
  const btnClass = classNames('btn', {
    'btn-primary': isPrimary,
    'btn-large': size === 'large',
    'btn-small': size === 'small',
  });

  return <button className={btnClass}>Button</button>;
}

总而言之，React 选择 className 是一个基于语言语法限制（JavaScript 保留字）和设计哲学（一致性、遵循 DOM API）的必然且合理的选择。