Wie kann ich Klassen dynamisch zu Reaktionskomponenten hinzufügen?

Klassennamen in React dynamisch erweitern

In React ist es häufig erforderlich, eine Klasse dynamisch zu einem Satz vordefinierter Klassennamen hinzuzufügen. Babel bietet eine praktische Lösung für dieses Szenario.

Dynamische Klassenaddition erreichen

Um eine dynamische Klasse zu einer Liste regulärer Klassen hinzuzufügen, können Sie in JSX den folgenden Ansatz verwenden:

className={'wrapper searchDiv ' + this.state.something}

Dieses Codefragment verkettet das String-Literal „wrapper searchDiv“ mit dem Wert von this.state.something, um den Klassennamen zu erstellen. Alternativ können Sie eine Zeichenfolgenvorlage verwenden:

className={`wrapper searchDiv ${this.state.something}`}

Beide Lösungen basieren auf der Tatsache, dass in JSX alles, was in geschweifte Klammern eingeschlossen ist, als JavaScript ausgeführt wird. Dadurch haben Sie die Flexibilität, Klassennamen mithilfe von Variablen oder Zustandswerten dynamisch zu generieren.

Wichtiger Hinweis

Obwohl es verlockend ist, JSX-Zeichenfolgen und geschweifte Klammern für Attribute zu kombinieren, ist es wichtig, dies zu vermeiden üben. In geschweiften Klammern ist in JSX nur JavaScript zulässig.

Das obige ist der detaillierte Inhalt vonWie kann ich Klassen dynamisch zu Reaktionskomponenten hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!