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

為手動類別名稱新增動態類別

在Babel 基於JavaScript 的JSX 上下文中，您可能會遇到需要附加動態類別的情況。類別到現有類別的清單。以下是實現此目標的方法：

兩種主要方法：

傳統JavaScript：

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

此方法結合了常規字串連接以附加動態類別name.

字串範本版本：

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

這裡，反引號用於建立允許JavaScript 表達式插值的字串範本。

JSX 具體注意事項：

在 JSX 中，Curly方括號括住 JavaScript 程式碼，因此其中的任何內容都會被執行。然而，當將 JSX 字串與屬性的大括號組合時，會出現警告。

替代方案：

或者，您可以利用 Babel 的 transform-class-properties 外掛程式來啟用類別屬性分配的形式為：

class MyComponent {
  classes = 'wrapper searchDiv ' + this.state.something;
}

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