如何使用 Babel 動態新增類別到 React 元素？

Babel 中的動態類別添加

在處理動態內容時，通常需要在元素中加入其他類別。在使用 Babel 的 React 應用程式中，這可以透過 className 屬性來實現。

問題：

如何將動態類別追加到現有類別的清單中？例如，一個 className 為「wrapper searchDiv」的 React 元件需要動態更新為「wrapper searchDiv {this.state.something}」。

答案：

有兩種方法可以實現此目的：

1。傳統 JavaScript 方法：

使用 JavaScript 在 className屬性中新增附加類，如下所示：

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

2.字串模板方法：

使用反引號建立字串模板，這樣可以使程式碼更簡潔：

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

在這兩種方法中，大括號中都包含JavaScript 程式碼，允許修改字串和新增動態值。但是，需要注意的是，不支援在屬性中組合 JSX 字串和大括號。

以上是如何使用 Babel 動態新增類別到 React 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！