我看到 React 16 允许将属性传递给 DOM。所以，这意味着可以使用 'class' 代替 className，对吗？
我只是想知道除了向后兼容以前版本的 React 之外，仍然使用 className 是否有优势。
React 16 中的类与类名
IT技术
reactjs
2021-03-29 02:44:13
6个回答
class是 javascript 中的关键字，而 JSX 是 javascript 的扩展。这就是 React 使用className而不是class.
在这方面没有任何改变。
再扩展一点。一个关键字意味着一个令牌有一个语言的语法具有特殊意义。例如在：
class MyClass extends React.Class {
Tokenclass表示下一个标记是一个标识符，接下来是一个类声明。请参阅Javascript 关键字 + 保留字。
标记是关键字这一事实意味着我们不能在某些表达式中使用它，例如
// invalid in older versions on Javascript, valid in modern javascript
const props = {
class: 'css class'
}
// valid in all versions of Javascript
const props = {
'class': 'css class'
};
// invalid!
var class = 'css';
// valid
var clazz = 'css';
// invalid!
props.class = 'css';
// valid
props['class'] = 'css';
问题之一是没有人可以知道将来是否会出现其他问题。每种编程语言都在不断发展，class实际上可以在一些新的冲突语法中使用。
不存在这样的问题className。
更新（2020 年 8 月）：
一个评论丹阿布拉莫夫在同一线程上：
这是提案中最具争议的部分。从那时起，我们发布了 Hooks，它鼓励编写函数组件。在函数组件中，我们一般建议对 props 使用解构，但是你不能写，
{ class, ... }因为它会出现语法错误。所以总的来说，目前尚不清楚这是否符合人体工程学，可以实际贯彻执行。我认为我们将来可能会重新审视这个问题，或者至少class不要警告并让人们做他们想做的事。但现在，我们将搁置这个想法。
所以，不
（2018 年 8 月）
React 团队实际上将切换到class 而不是 className在即将到来的未来（来源）：
className→class（#4331，另见下面的#13525（评论））。这已经被提出无数次了。我们已经允许在 React 16 中将类向下传递到 DOM 节点。这造成的混乱不值得它试图防止的语法限制。
为什么要切换而不支持两者？
如果我们在没有警告的情况下支持两者，那么社区将分裂使用哪个。npm 上接受类 prop 的每个组件都必须记住转发这两个组件。如果在中间连一个组件没有一起玩和工具只有一个支柱，类丢失了-否则你可能结束了
class，并className在底部选择“不同意”彼此，没有办法进行应对解决冲突。所以我们认为这会比现状更糟糕，并希望避免这种情况。
所以你应该继续关注。只要这是 API 所期望的，
我仍然建议使用className。
除了已经给出的其他好答案之外，只是为了更清楚地说明：
你会注意到 React 使用 className 而不是传统的 DOM 类。来自文档，“由于 JSX 是 JavaScript，不鼓励将诸如 class 和 for 之类的标识符作为 XML 属性名称。相反，React DOM 组件期望分别使用 className 和 htmlFor 等 DOM 属性名称。”
http://buildwithreact.com/tutorial/jsx
另外，引用 zpao（React 贡献者 / facebook 员工）
我们的 DOM 组件（主要）使用 JS API，因此我们选择使用 JS 属性（node.className，而不是 node.class）。
React 文档推荐使用cannonical React attribute名称而不是传统的 Javascript 命名，因此即使 React 允许将属性传递给 DOM，它也会给你一个警告。
从文档：
Known attributes with a different canonical React name:
<div tabindex="-1" />
<div class="hi" />
React 15: Warns and ignores them.
React 16: Warns but converts values to strings and passes them through.
Note: always use the canonical React naming for all supported attributes.
截至 2019 年 6 月，将 className 更改为 class 的过程已停止，稍后可能会继续
这是facebook dev的帖子解释原因