如何為 ReactJS 元件的 className 屬性新增多個類別？

ReactJS 元件中的多個類別：詳細解決方案

使用ReactJS 和JSX 時，可以將多個類一項共同的任務。本文示範如何使用 ES6 範本文字來實現此目的，提供了一個乾淨簡潔的解決方案。

考慮以下程式碼片段：

<li key={index} className={activeClass, data.class, "main-class"}></li>

此程式碼嘗試將多個類別名稱連接到 className 中屬性，但它錯誤地將它們作為單獨的參數指派給 className 屬性。相反，我們需要使用模板文字來建立包含所需類別的字串。

這是使用 ES6 範本文字修改後的程式碼：

<li key={index} className={`${activeClass} ${data.class} main-class`}></li>

透過將類別名稱括在大括號內在反引號內，我們可以將它們連接成一個字串。然後，className 屬性接收這個動態產生的字串，確保元件具有所有指定的類別。

另一個方便的方法是單行版本：

<li key={index} className={`form-control round-lg ${this.state.valid ? '' : 'error'}`}></li>

我們使用條件表達式在反引號內根據條件在類別之間切換。在此範例中，僅當有效狀態屬性為 false 時才會新增「錯誤」類別。

這些技術提供了一個簡單而優雅的解決方案，用於為 ReactJS 元件添加多個類，從而更輕鬆地設計和增強您的應用程式的功能。

以上是如何為 ReactJS 元件的 className 屬性新增多個類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！