如何在JSX中動態新增和管理類別名稱？

動態增強 JSX 中的類別名稱

在 JSX 中，動態增強類別名稱可能具有挑戰性。一個常見的要求是加入基於狀態或道具的條件類別。以下是實現此目的的方法：

選項 1：JavaScript 連接

<div className={'wrapper searchDiv ' + this.state.something}>
  ...
</div>

此方法利用 JavaScript 連接將動態類別新增至現有類別清單。

選項 2：字串範本文字

<div className={`wrapper searchDiv ${this.state.something}`}>
  ...
</div>

字串範本文字（反引號）為建構動態類別提供了更清晰的語法。它們允許您使用 ${} 在字串中嵌入表達式。

註解：

• 記住，JSX 屬性被視為 JavaScript 程式碼，因此您可以執行大括號內的 JavaScript。
• 但是，在屬性內組合 JSX 字串和大括號並不支援。
• JavaScript 連線和字串範本文字都為 JSX 中的動態類別名稱操作提供了可行的解決方案。

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