如何在React中正確實作條件類別渲染？

React 中類別屬性的條件渲染

在React 中，根據從父元件接收到的props 有條件地顯示或隱藏元素是常見的用例。在給定的程式碼片段中，作者的目標是根據 showBulkActions 屬性的值隱藏或顯示按鈕組。

問題是用於條件渲染的大括號 { } 包含在字串內類別名稱屬性。這會將整個字串解釋為靜態值，從而導致沒有實際的條件渲染。

解決方案：

要根據 prop 有條件地應用類別屬性，大括號必須放置在字串外部，包含邏輯條件並確定類別名稱。下面的程式碼說明了正確的方法：

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

說明：

• className 現在用花括號括起來。
• The邏輯條件(this.props.showBulkActions ? 'show' : 'hidden') 計算結果為如果this.props.showBulkActions 為true，則為「show」；如果為false，則為「hidden 」。
• 「pull-right」後面的空格確保「pull-rightshow」不會無意中應用為類別。
• 括號對於三元表達式的正確求值至關重要。

經過這些修正後，按鈕組現在應該根據父元件的 showBulkActions 屬性有條件地出現或消失。

以上是如何在React中正確實作條件類別渲染？的詳細內容。更多資訊請關注PHP中文網其他相關文章！