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

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

在開發React 應用時，你可能會遇到需要根據條件動態顯示或隱藏元素的場景從父元件傳遞的props。出現的常見問題是類別屬性的條件應用。

解決此問題的一種方法是使用條件渲染語法，將元素括在花括號中並提供一個邏輯表達式來確定是否渲染它。但是，在處理類別屬性時，需要採用不同的方法。

在提供的範例中，目標是根據 showBulkActions 屬性有條件地顯示按鈕組。程式碼嘗試像這樣呈現按鈕組：

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

但是，什麼也沒有發生，因為大括號包含在字串內。要解決此問題，需要將大括號放在字串外部：

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

這可確保在將字串指派給 className 屬性之前評估條件。此外，請確保條件表達式之前有一個空格，以避免意外的類別串聯。

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