Wie kann ich Klassenattribute in React bedingt anwenden?

Klassenattribute in React bedingt anwenden

In React ist es üblich, Elemente basierend auf von übergeordneten Komponenten übergebenen Requisiten ein- oder auszublenden. Um dies zu erreichen, können Sie CSS-Klassen bedingt anwenden. Bei der Verwendung der Syntax {this.props.condition ? 'show' : 'hidden'} direkt innerhalb einer Zeichenfolge.

Um dieses Problem zu beheben, verschieben Sie die geschweiften Klammern außerhalb der Zeichenfolge, wie in diesem korrigierten Beispiel zu sehen ist:

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

Dies Durch die Anpassung wird sichergestellt, dass die Bedingung ausgewertet wird, bevor die Klassennamen verkettet werden. Beachten Sie das Leerzeichen nach „pull-right“, um zu verhindern, dass versehentlich die Klasse „pull-rightshow“ anstelle der vorgesehenen Klasse „pull-right show“ erstellt wird. Darüber hinaus sind die Klammern für die richtige Auswertung von entscheidender Bedeutung.

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