如何在 JSX 中動態新增類別到靜態類別名稱？

在JSX 中動態加入類別到手動類別名稱

在JSX 中，我們經常需要根據某些條件動態地為元素添加類。這需要操作 className 屬性以包含靜態和動態類別名稱。以下是實現此目的的方法：

使用JavaScript 語法

您可以使用普通JavaScript 語法將動態類別新增至手動類別名稱：

className={'wrapper searchDiv ' + this.state.something}

這會將靜態類別名稱「wrapper」和「searchDiv」與狀態屬性決定的動態類別名稱連接起來this.state.something.

使用字串模板

或者，您可以使用帶有反引號的字串模板（ES6 模板文字）：

className={`wrapper searchDiv ${this.state.something}`}

此語法允許您將JavaScript表達式直接插入字串中，包括動態類別

注意：

請記住，JSX 中大括號內的任何內容都會被解釋為JavaScript 程式碼。因此，您可以根據需要在 className 屬性中執行複雜的邏輯並操作字串。但是，您不能直接在屬性中組合 JSX 字串和大括號。

以上是如何在 JSX 中動態新增類別到靜態類別名稱？的詳細內容。更多資訊請關注PHP中文網其他相關文章！