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 屬性。