Wie implementiert man das bedingte Klassenrendering in React richtig?

Bedingtes Rendern von Klassenattributen in React

In React ist das bedingte Ein- oder Ausblenden von Elementen basierend auf Requisiten, die von einer übergeordneten Komponente empfangen wurden, üblich Anwendungsfall. Im angegebenen Codeausschnitt zielt der Autor darauf ab, eine Schaltflächengruppe basierend auf dem Wert der showBulkActions-Requisite auszublenden oder anzuzeigen.

Das Problem besteht darin, dass die geschweiften Klammern { }, die für das bedingte Rendern verwendet werden, in der Zeichenfolge für eingeschlossen sind das className-Attribut. Dadurch wird die gesamte Zeichenfolge als statischer Wert interpretiert, was zu keinem tatsächlichen bedingten Rendering führt.

Lösung:

Um Klassenattribute basierend auf einer Requisite, den geschweiften Klammern, bedingt anzuwenden muss außerhalb der Zeichenfolge platziert werden, um die logische Bedingung einzuschließen und die Klassennamen zu bestimmen. Der folgende Code veranschaulicht den richtigen Ansatz:

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

Erklärung:

• Der Klassenname ist jetzt in geschweifte Klammern eingeschlossen.
• Der Die logische Bedingung (this.props.showBulkActions ? 'show': 'hidden') ergibt 'show' if this.props.showBulkActions ist wahr und „versteckt“, wenn es falsch ist.
• Das Leerzeichen nach „pull-right“ stellt sicher, dass „pull-rightshow“ nicht unbeabsichtigt als Klasse angewendet wird.
• Die Klammern sind entscheidend für die ordnungsgemäße Auswertung des ternären Ausdrucks.

Durch Befolgen dieser Korrekturen sollte die Schaltflächengruppe nun bedingt sein erscheinen oder verschwinden basierend auf der showBulkActions-Requisite der übergeordneten Komponente.

Das obige ist der detaillierte Inhalt vonWie implementiert man das bedingte Klassenrendering in React richtig?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!