我啥时候应该在“class”上使用“className”，反之亦然？

Posted 2023-03-16

【中文标题】我啥时候应该在“class”上使用“className”，反之亦然？

【英文标题】：When should I use 'className' over 'class' and vise versa in react?我什么时候应该在“class”上使用“className”，反之亦然？

【发布时间】：2020-08-19 02:40:24

【问题描述】：

我正在制作我的第一个 react 应用程序，我遇到了一些有趣的事情，我有时在 react 上使用 className 而不是 class。我只是想知道它们是否可以互换，还是出于某种原因？我还注意到，当我使用class 时，检查元素控制台会询问我是否是指className，没有错误，只是询问。

提前致谢！

【参考方案1】：

根据反应docs:

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

如果您将 React 与 Web 组件一起使用（这并不常见），请使用 而是类属性。

如果您使用class 作为属性，它会在没有任何验证的情况下传递给底层的dom 元素，但这不是首选方法。 className 是 react 理解的属性。

React 文档建议使用 cannonical React attribute 名称而不是传统的 javascript 命名，因此即使 React 允许将属性传递给 DOM，它也会给你一个警告。

【参考方案2】：

识别未知 DOM 属性是另一个“功能”。

过去，React 过去常常忽略未知的 DOM 属性。如果你用 React 无法识别的属性编写 JSX，React 会跳过它。

来自React 16 的has changed 并给出警告。你在 React 中使用 DOM 组件的方式没有改变，但现在你有了一些新的能力。

React 一直为 DOM 提供以 JavaScript 为中心的 API。由于 React 组件通常同时采用自定义和 DOM 相关的 props，因此 React 使用 camelCase 约定就像 DOM API 一样是有意义的

至于className：

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

如果您将 React 与 Web 组件一起使用（这并不常见），请改用 class 属性。

见Specifying Attributes with JSX:

由于 JSX 更接近于 JavaScript 而不是 html，React DOM 使用 camelCase 属性命名约定而不是 HTML 属性名称。

例如，JSX中class变成className，tabindex变成tabIndex。