如何在 React 中有條件地應用類別屬性：為什麼我的按鈕群組可見性切換不起作用？

在 React 中有條件地應用類別屬性

從概念上講，有條件地渲染元素是 React 中的常見用例。然而，當考慮類別屬性時，問題就出現了。本文透過一個實際範例探討如何有條件地應用類別屬性：

問題：

使用者正在嘗試根據按鈕群組的可見性切換按鈕群組的可見性從父組件傳遞的布林值。但是，類屬性未正確計算。

<code class="jsx"><div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}></code>

答案:

問題在於表達式周圍大括號的位置。它們不應位於字串內部，而應與括號一起位於外部，如下所示：

<code class="jsx"><div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}></code>

透過將大括號放在字串外部，表達式將被計算為JavaScript 程式碼而不是靜態字串。這允許根據 this.props.showBulkActions 的布林值應用正確的類別。

此外，在「向右拉」後面加上一個空格以確保正確套用類別屬性。如果沒有空格，就會有建立無效類別的風險，例如「pull-rightshow」而不是「pull-right show」。

以上是如何在 React 中有條件地應用類別屬性：為什麼我的按鈕群組可見性切換不起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！