React之className

React
入门

在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 呢？

因为：

1. class 是 JavaScript 的关键词（用来定义“类”，比如 class Foo {}）。
2. JSX 会被转成 JavaScript 代码，所以 React 团队不敢让你在 JSX 写 class="xxx"，怕和 JS 冲突。
3. 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。