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

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

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

問題：

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

<div classname="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}">
<p>問題在於花括號被計算為字串，並且沒有顯示任何內容。 </p>
<p><strong>答案：</strong></p>
<p>問題在於字串中大括號的位置不正確。要正確評估條件語句，應將大括號放在字串外部：</p>
<pre class="brush:php;toolbar:false"><div classname='{"btn-group' pull-right :>
<p>這可確保首先評估條件語句，並將結果與類字串連接。請注意，「pull-right」後面的空格對於避免意外組合類別非常重要（例如，「pull-rightshow」而不是「pull-right show」）。此外，需要括號來確保正確的評估。 </p>
<p>透過進行此調整，按鈕組現在將根據父組件中 showBulkActions 屬性的值按預期顯示或消失。 </p>
</div>