如何在 React 中有條件地應用類別屬性以實現動態 UI 控制？

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

React 提供了一種根據特定條件有條件地將類別屬性應用到元素的便捷方法。這允許開發人員根據應用程式的狀態動態控制 UI 元素的外觀或行為。

考慮以下場景，您希望根據從父組件：

<TopicNav showBulkActions={this.__hasMultipleSelected} />

在父組件中，__hasMultipleSelected 函數傳回 true 或 false，具體取決於應用程式的狀態。然後，您可以在TopicNav 元件的render 方法中使用以下程式碼來有條件地應用類別屬性：

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

但是，在您提供的程式碼中，大括號錯誤地放置在字串中，這會妨礙正確的處理條件表達式的求值。正確的語法應該是：

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

透過將大括號放在字串外部，可以確保先計算表達式(this.props.showBulkActions ? 'show' : 'hidden')，然後然後將產生的字串與其餘的類別屬性連接起來。這將按預期工作，根據 this.props.showBulkActions 的值有條件地顯示或隱藏按鈕組。

以上是如何在 React 中有條件地應用類別屬性以實現動態 UI 控制？的詳細內容。更多資訊請關注PHP中文網其他相關文章！