Wie wende ich Klassenattribute in React for Dynamic UI Control bedingt an?

Bedingtes Anwenden von Klassenattributen in React

React bietet eine praktische Möglichkeit, Klassenattribute basierend auf bestimmten Bedingungen bedingt auf Elemente anzuwenden. Dadurch können Entwickler das Erscheinungsbild oder Verhalten von UI-Elementen abhängig vom Status der Anwendung dynamisch steuern.

Stellen Sie sich das folgende Szenario vor, in dem Sie eine Schaltflächengruppe basierend auf einer von a übergebenen booleschen Eigenschaft bedingt ein- oder ausblenden möchten übergeordnete Komponente:

<TopicNav showBulkActions={this.__hasMultipleSelected} />

In der übergeordneten Komponente gibt die Funktion __hasMultipleSelected je nach Status der Anwendung entweder true oder false zurück. Sie können dann den folgenden Code in der Render-Methode der TopicNav-Komponente verwenden, um Klassenattribute bedingt anzuwenden:

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

In Ihrem bereitgestellten Code sind die geschweiften Klammern jedoch falsch in der Zeichenfolge platziert, was eine ordnungsgemäße Anwendung verhindert Auswertung des bedingten Ausdrucks. Die korrekte Syntax sollte wie folgt lauten:

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

Durch Platzieren der geschweiften Klammern außerhalb der Zeichenfolge stellen Sie sicher, dass der Ausdruck (this.props.showBulkActions ? 'show' : 'hidden') zuerst ausgewertet wird und der Die resultierende Zeichenfolge wird dann mit den verbleibenden Klassenattributen verkettet. Dies funktioniert wie erwartet und zeigt die Schaltflächengruppe abhängig vom Wert von this.props.showBulkActions.

bedingt an oder blendet sie aus

Das obige ist der detaillierte Inhalt vonWie wende ich Klassenattribute in React for Dynamic UI Control bedingt an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!