如何使用範本文字為 ReactJS 元件新增多個類別？

使用模板文字為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中文網其他相關文章！