在React中，className是用来设置元素类名的属性，而不是class，这是因为class是JavaScript的保留字，用于定义类，为了避免与JavaScript关键字冲突，React采用了className来表示HTML元素的类名。
在 HTML 里：
<h1 class="my-title">Hello</h1>
这个 class 是 HTML 里用来加 CSS 样式的属性，是HTML的语法 —— 表示“这个标签应用了叫 my-title 的样式”。
React 里的 className
React 使用的是 JSX，它看起来像 HTML，其实是 JavaScript 写法的“变种”。
所以在 React/JSX 里写：
<h1 className="my-title">Hello</h1>
这个 className 也是为了加 CSS 样式！它等价于 HTML 的 class，只是换了个写法，作用是一样的。
那为什么换成 className 呢？
因为：
class是 JavaScript 的关键词（用来定义“类”，比如class Foo {}）。- JSX 会被转成 JavaScript 代码，所以 React 团队不敢让你在 JSX 写
class="xxx"，怕和 JS 冲突。 - JavaScript会使用dom.className获取样式名，跟js保持一致
原文说明：
React has always provided a javascript-centric API to the DOM. Since React components often take both custom and DOM-related props, it makes sense for React to use the cameCase convention just like the DOM API.
也就是说：
| 用法 | 语言 | 加样式方式 |
|---|---|---|
| HTML | 浏览器原生 | class="btn" |
| JSX (React) | JavaScript 语法 | className="btn" |
举个完整例子来帮你直观感受：
HTML 版本：
<h1 class="title">你好</h1>
React (JSX) 版本：
<h1 className="title">你好</h1>
最终页面效果一模一样，只是写法不同。
总结一句话：
React 中的
className就是 HTML 的class，只是为了不跟 JavaScript 的class语法冲突，换了个名字而已，本质都是为了加 CSS 样式。
你可以完全把它当成“加样式用的”，不用去联想“JS 的类”，只不过在 React 写代码时名字叫 className。
