在ReactJS中，我们处理的是JSX，而不是众所周知的HTML。JSX希望您使用className，因为它是底层的JavaScript DOM API！class是JS中的保留关键字不是我们不使用class而是使用className的主要原因。这是因为我们指的是DOM API

React团队对此没有真正的解释，但自从ES2015 +引入以来，人们就可以认为它与Javascript中的保留关键字“ class”是有区别的。

即使您在创建元素时在元素配置中使用“类”，它也不会引发任何编译/渲染错误。

与JavaScript中的函数一样，reactJS中的Class与className类是reactJS中的保留字或关键字。这就是为什么我们使用单词“ className”来引用该类的原因。

截至2019年6月，将className更改为class的过程已停止，以后可以继续进行

这是facebook dev的帖子解释了为什么

https://github.com/facebook/react/issues/13525

React docs建议使用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.

除了已经给出的其他良好答案之外，还需要一点点启示：

您会注意到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团队将切换到class 而不是 className在即将到来的将来（来源）：

• className→ class（＃4331，另请参阅下面的＃13525（评论））。已经提出了无数次了。我们已经允许在React 16中将类传递到DOM节点。由此造成的混乱不值得它试图避免的语法限制。

为什么要切换而不同时支持两者？

如果我们在没有警告的情况下支持这两种方法，那么社区将在使用哪一种方法上进行分配。npm上接受类道具的每个组件都必须记住同时转发两者。如果在中间连一个组件没有一起玩和工具只有一个支柱，类丢失了-否则你可能结束了class，并className在底部选择“不同意”彼此，没有办法进行应对解决冲突。因此，我们认为那会比现状更糟，并希望避免这种情况。

所以你应该保持关注。只要这是API所期望的，
我仍然会使用className。