如何動態新增類別到React元件？

在 React 中動態增強類別名稱

在 React 中，通常需要動態地將類別新增至一組預先定義的類別名稱中。 Babel 為這種情況提供了一個方便的解決方案。

實作動態類別新增

要將動態類別加入到常規類別清單中，您可以在JSX 中使用下列方法：

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

此程式碼片段將字符串文字「wrapper searchDiv」與this.state.something 的值連接以建立className。或者，您可以使用字串模板：

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

這兩個解決方案都依賴於這樣一個事實：在 JSX 中，大括號內的任何內容都會作為 JavaScript 執行。因此，您可以靈活地使用變數或狀態值動態產生類別名稱。

重要提示

雖然將 JSX 字串和大括號組合為屬性很誘人，但避免這種情況很重要實踐。 JSX 中的大括號內只允許使用 JavaScript。

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