Wie wendet man Klassenattribute in React bedingt an?

Bedingtes Anwenden von Klassenattributen in React

Problem

Sie versuchen, eine Schaltflächengruppe basierend auf einer von a übergebenen Requisite bedingt anzuzeigen oder auszublenden übergeordnete Komponente. Allerdings verursacht die bedingte Logik innerhalb des Klassenattributs das erwartete Verhalten.

Lösung

Um Klassenattribute korrekt bedingt in React anzuwenden, stellen Sie sicher, dass die geschweiften Klammern, die die bedingte Logik einschließen, außerhalb der Zeichenfolge liegen .

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

Im korrigierten Code:

• Die geschweiften Klammern befinden sich außerhalb der Zeichenfolge, sodass die bedingte Logik innerhalb der Zeichenfolge ausgewertet wird.
• Die Klammern rund um die bedingte Logik sind notwendig, um eine ordnungsgemäße Ausführung sicherzustellen.
• Nach „pull-right“ wird ein Leerzeichen eingefügt, um zu vermeiden, dass versehentlich die Klasse „pull-rightshow“ anstelle von „pull-right show“ bereitgestellt wird.

Mit diesen Anpassungen funktionieren die bedingten Klassenattribute wie erwartet und zeigen oder verbergen die Schaltflächengruppe basierend auf dem Wert der showBulkActions-Requisite.

Das obige ist der detaillierte Inhalt vonWie wendet man Klassenattribute in React bedingt an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!