JSX 中的 className 属性

本文将分析使用 class 和 className 属性时发生的变化以及它们的区别。

JSX 中的 class 属性与 className 属性

在处理 HTML 时，我们通常使用 class 属性来定位元素以使用 CSS 进行样式设置。

例如，我们创建一个 div，如下所示：

<div class="body">
    <p>
        Click me!
    </p>
</div>

我们可以在 CSS 中定位 body 元素，即：

.body {
    position: absolute;
}

但是对于 React，class 属性执行创建对象的不同功能，因为它是 JavaScript 中的关键字。

即使我们可以在 React 中使用 class 和 className 属性，当浏览器，尤其是旧浏览器，正在读取这些代码时，这主要会导致矛盾和错误。

所以最好的解决方法是在 React 中使用 className 属性而不是 class。令人惊奇的是，在代码被编译并在浏览器中打开后，我们看不到 className；相反，我们看到了 class。

就像在 HTML 中一样，className 将作为 CSS 样式的目标，如下所示：

<div className='box'>
    <p>
        Click me!
    </p>
</div>

.box {
    background-color: blue;
}

因此，为了避免复杂化并纠正更好的代码，理想的做法是为 React 框架中的元素使用 className 属性。