Wie wende ich Klassenattribute bedingt in React an?

Bedingtes Anwenden von Klassenattributen in React

Bei der Entwicklung von React-Anwendungen können Sie auf Szenarien stoßen, in denen Sie Elemente basierend auf dynamisch ein- oder ausblenden müssen Requisiten, die von übergeordneten Komponenten übergeben wurden. Ein häufig auftretendes Problem ist die bedingte Anwendung von Klassenattributen.

Ein Ansatz hierfür ist die Verwendung der Syntax für bedingtes Rendern, bei der Sie das Element in geschweifte Klammern einschließen und einen logischen Ausdruck bereitstellen, der bestimmt, ob es gerendert werden soll. Beim Umgang mit Klassenattributen ist jedoch ein anderer Ansatz erforderlich.

Im bereitgestellten Beispiel besteht das Ziel darin, eine Schaltflächengruppe basierend auf einer showBulkActions-Requisite bedingt anzuzeigen. Der Code versucht, die Schaltflächengruppe wie folgt darzustellen:

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

Es passiert jedoch nichts, da die geschweiften Klammern in der Zeichenfolge eingeschlossen sind. Um dies zu beheben, müssen die geschweiften Klammern außerhalb der Zeichenfolge platziert werden:

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

Dadurch wird sichergestellt, dass die Bedingung ausgewertet wird, bevor die Zeichenfolge dem Attribut „className“ zugewiesen wird. Stellen Sie außerdem sicher, dass vor dem bedingten Ausdruck ein Leerzeichen steht, um eine unbeabsichtigte Klassenverkettung zu vermeiden.

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