在React中，何时应该使用'className'而不是'class'，反之亦然？

Question

我正在制作我的第一个React应用程序，遇到了一些有趣的东西，我有时会在React中使用className而不是class。 我想知道它们是否可以互换，或者是有特殊的原因？ 我还注意到当我使用class时，检查元素控制台会问我是否意味着className，没有错误，只是询问。

提前感谢！

- alexholstv

Answer 1

根据React 文档：

要指定CSS类，请使用className属性。这适用于所有常规DOM和SVG元素，如<div>、<a>等。

如果您使用React与Web组件（这很少见），请改用class属性。

如果您将class作为属性，则会将其传递到底层DOM元素而不进行任何验证，但这不是首选方法。 className是React可以理解的属性。

React文档建议使用规范的React属性名称而不是传统的JavaScript命名方式，因此即使React允许将属性传递到DOM中，它也会给出警告。

- Jagrati

Answer 2

这是另一个“功能”，用于识别未知的DOM属性。

过去，React会忽略未知的DOM属性。如果您使用JSX编写具有React无法识别的属性的代码，React将跳过它。

从React 16开始，它已更改并给出了警告。在React中使用DOM组件的方式没有改变，但现在您有了一些新功能。

React始终为DOM提供基于JavaScript的API。由于React组件经常同时接收自定义和与DOM相关的props，因此React使用camelCase约定就像DOM API一样是有意义的。

至于className：

要指定CSS类，请使用className属性。这适用于所有常规DOM和SVG元素，如<div>，<a>和其他元素。

如果您使用React与Web组件（这很少见），请改用class属性。

请参阅使用JSX指定属性：

由于JSX更接近于JavaScript而非HTML，React DOM使用驼峰命名法（camelCase）代替HTML属性名称。

例如，在JSX中class变为className，tabindex变为tabIndex。

- Dennis Vash