为什么 React 使用 className 而不是类属性？

对于所有常规的 DOM 和 SVG 元素，如 、

、、

等，如果我们想应用 CSS 类，我们使用className属性而不是 React 中的 class。这就是为什么每次你错误地写class而不是className时它都会警告你。

事实上，在 React 16 之前的早期，如果你用 React 无法识别的未知元素编写 JSX，它会简单地跳过它。例如：

上面的代码行会在 React 15 中向 DOM 渲染一个空的 div，

// React 15 output

但在 React 16 中，这个未知属性“xyz”也将最终出现在 DOM 中。

// React 16 output

这就是为什么在 React 15 中，当你使用class 为任何元素指定一个css类，它只会警告你并忽略它。但是现在由于 React 16 中新的 DOM 属性处理，它仍然会发出警告，但会将值转换为字符串并传递它们。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：它将如下所示。

项目结构

示例 1：现在，让我们通过一些实际的实现来理解这一点，假设我们只是在默认组件 App.js 的内部 HTML 中呈现带有一些文本的标题

。

输出：在上面的代码中，我们使用了类而不是类名，因此在控制台中，我们收到一条警告，上面写着：“无效的 DOM 属性 'class'，你的意思是 'className' ？ ” 但是它只在 React 16 中警告你，这就是为什么上面代码中的输出没有受到它的影响。

示例 2：您可以通过简单地使用className代替class来消除上述示例的警告，如下例所示：

应用程序.js

import "./App.css";
  
function App() {
  return 
This is an example code
;
}
  
export default App;

输出：

解释：它使用 className 而不是 class 的唯一原因是class是 JavaScript 中的保留关键字，并且由于我们在 React 中使用 JSX，它本身就是 JavaScript 的扩展，所以我们必须使用 className 而不是 class 属性。但是，给定 HTML 属性的 DOM 属性使用不同名称的情况很少见。例如类作为类名。但是什么都没有改变，className和class的语义是一样的，JSX渲染的时候，className属性会自动渲染为class属性。