如何將多個 CSS 類別注入到 ReactJS 元件中？

將多個類別注入ReactJS元件

在ReactJS中，className屬性允許我們定義CSS類別來設定元素的樣式。使用多個類別時，了解如何有效、動態地添加它們至關重要。

問題：

初學者在嘗試將多個類別分配給li 中的className 屬性元素：

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

解決方案：

要解決此問題，我們利用ES6模板文字：

const classes = `active ${data.class} main-class`;

透過在其中包含多個類別反引號並用空格連接它們，我們建立一個可以分配給 className的動態類別字串屬性：

<li key={index} className={classes} onClick={self.clicked.bind(self, index)}></li>

範例：

const errorMessage = this.state.error ? "error" : "";
const inputClasses = `form-control ${errorMessage}`;

然後，我們簡單渲染輸入：

<input className={inputClasses} />

然後，我們簡單地渲染輸入：

此方法提供了一個簡單的以及將多個類別注入ReactJS 元件的通用方法，增強靈活性和程式碼可讀性。

以上是如何將多個 CSS 類別注入到 ReactJS 元件中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！