使用模板文字為ReactJS 元件添加多個類別
要為ReactJS 中的元件添加多個類別，您可以使用ES6 模板文字。此方法提供了一種簡潔高效的方法，將字串和變數組合成單一表達式。
第 1 步：定義類別變數
在元件的 render 方法中，定義一個變數來儲存要新增的類別。例如：
const activeClass = this.state.focused === index ? 'active' : '';
此變數根據組件的狀態有條件地設定「活動」類別。
步驟 2：使用範本文字組合類別
範本文字可讓您使用反引號 (`) 建立多行字串。在字串中，使用 ${} 語法嵌入類別變數。
const classes = `${activeClass} data.class main-class`;此行將 'activeClass'、'data.class' 和 'main-class' 變數連接到單一字串中。
第 3 步：指派給 className 屬性
在 JSX 元素中，將 'classes' 變數指派給 'className' 屬性。這會將所有類別應用於元素。
<li key={index} className={classes}>...</li>單行解
您可以使用單行版本將這些步驟合併到一行中:
const classes = `form-control round-lg ${this.state.valid ? '' : 'error'}`;其中'this. state.valid' 是一個狀態變量，有條件地加入'error' 類別。
以上是如何使用範本文字為 ReactJS 元件新增多個類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
