我不知道的 React Props className，htmlFor 和 tabIndex今天的问题来自面试官 Dan

生有涯而知无涯，今天开始一个全新的系列，【我不知道的】系列。我不知道的有很多，而且我不知道你是否知道，希望通过这个系列的文章，让你我都知道。

今天是 React 的一个 tips，来自面试官 Dan Abramov ：

Dan 总的灵魂发问：你知道为啥 React 的一些属性名（如 className 、tabIndex、htmlFor) 和 HTML 的标准属性不一样吗？

我：我好像知道又不知道，class 在 JavaScript 里是关键字，所以不能用，但是为啥叫 className 而不是 htmlClass 之类的呢。但是 Dan 总你自问自答了啊，这些是和 Web 标准里的 DOM 属性对应的。

来看看 ChatGPT 怎么答这道题：

回答出了一部分，再给小 G 一次机会：

回答的不错，来看看 Dan 总的满分回答：

Dan 总提到，在 Web 平台，有两个截然不同的概念：

• HTML 属性（attributes）如 <div class="stuff">
• DOM 属性（properties）如 divNode.className = "stuff"

HTML 属性通常表示初始值，并不总是随时间更新，而 DOM 属性总是最新的。

这段怎么理解呢？举个例子：

其实最典型的案例就是 <input>，给 input 的 value 属性一个初始值，

后面无论如何输入，该 <input> HTML 的 value 属性都不变，而使用 DOM API 查看，是随着输入变化的；

但是其他如 Dan 提到的 class、for、tabindex 属性，如果使用 DOM API 改变其值，其 HTML 的属性值也随之变化，具体可以查看如下 Demo:

再次回到这个问题，除了不能与 JavaScript 关键字重名之外，React 采用与 DOM 属性一致的做法还有一个原因，那就是，React 与 HTML 不同，React 中标签的属性不仅仅代表初始值，而是全时段的值，这和 DOM 属性的概念更加匹配。

但是这样也会对用户造成一定困惑，尤其是在 JSX 里，明明看起来是 HTML，但是属性值确不是 HTML 标准属性值。Dan 说回想起来，尽可能使用 HTML 命名可以有效减少争议。确实如此，感觉好久没写原生 HTML 了，时间久了确实会混淆。

延伸阅读

关于在 React 中使用 className 代替 class 的原因讨论，可以参考这篇：What's the reason behind using class instead of className?

复习一下 for 和 tabindex：

• HTML <label> 标签的属性 for： developer.mozilla.org/en-US/docs/…
• 与之对应的 Web API 中的 htmlFor developer.mozilla.org/en-US/docs/…
• HTML 全局属性 tabindex：developer.mozilla.org/en-US/docs/…
• 与之对应的 Web API 中的 tabIndex，注意只是变成驼峰命名了，非常相似：developer.mozilla.org/en-US/docs/…

获取 HTML 属性（Attribute）的方法：

• Element.getAttribute() ： developer.mozilla.org/en-US/docs/…
• Element.attributes ：developer.mozilla.org/en-US/docs/…

Dan 对用户 Yadiel 关于 className 说法的回复：

---

今天的【我不知道的 React】就写到这里，我已经知道了，你们呢，欢迎在评论区留言交流讨论，分享线索，我们下期再见！