如何在 React 中有條件地應用類別屬性而不出現字串插值問題？

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

在React 中，基於props 動態應用類別屬性對於有條件地顯示或隱藏元素非常有用。然而，一個常見的問題是用於條件檢查的花括號可能會被誤解為字串插值。

問題：

使用者正在嘗試有條件地顯示按鈕群組基於父組件的 prop。程式碼片段如下：

<div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}">

問題在於花括號被計算為字串，並且沒有顯示任何內容。

答案：

問題在於字串中大括號的位置不正確。要正確評估條件語句，應將大括號放在字串外部：

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

這可確保首先評估條件語句，並將結果與類字串連接。請注意，「pull-right」後面的空格對於避免意外組合類別非常重要（例如，「pull-rightshow」而不是「pull-right show」）。此外，需要括號來確保正確的評估。

透過進行此調整，按鈕組現在將根據父組件中 showBulkActions 屬性的值按預期顯示或消失。

以上是如何在 React 中有條件地應用類別屬性而不出現字串插值問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！