Wie kann ich dem className-Attribut einer ReactJS-Komponente mehrere Klassen hinzufügen?

Mehrere Klassen in ReactJS-Komponenten: Eine detaillierte Lösung

Bei der Arbeit mit ReactJS und JSX kann das Hinzufügen mehrerer Klassen zum className-Attribut einer Komponente erforderlich sein eine gemeinsame Aufgabe. Dieser Artikel zeigt, wie Sie dies mit ES6-Vorlagenliteralen erreichen und bietet eine saubere und prägnante Lösung.

Beachten Sie den folgenden Ausschnitt:

<li key={index} className={activeClass, data.class, "main-class"}></li>

Dieser Code versucht, mehrere Klassennamen im Klassennamen zu verketten Attribut, aber es weist sie fälschlicherweise als separate Argumente der className-Eigenschaft zu. Stattdessen müssen wir Vorlagenliterale verwenden, um eine Zeichenfolge zu erstellen, die die gewünschten Klassen enthält.

Hier ist der überarbeitete Code mit ES6-Vorlagenliteralen:

<li key={index} className={`${activeClass} ${data.class} main-class`}></li>

Durch Einschließen der Klassennamen in geschweifte Klammern Innerhalb der Backticks können wir sie zu einer einzigen Zeichenfolge verketten. Die className-Eigenschaft empfängt dann diese dynamisch generierte Zeichenfolge und stellt so sicher, dass die Komponente über alle angegebenen Klassen verfügt.

Eine weitere praktische Methode ist die einzeilige Version:

<li key={index} className={`form-control round-lg ${this.state.valid ? '' : 'error'}`}></li>

Wir verwenden einen bedingten Ausdruck innerhalb der Backticks, um basierend auf einer Bedingung zwischen Klassen umzuschalten. In diesem Beispiel wird eine „Error“-Klasse nur hinzugefügt, wenn die gültige Statuseigenschaft „false“ ist.

Diese Techniken bieten eine einfache und elegante Lösung zum Hinzufügen mehrerer Klassen zu ReactJS-Komponenten und erleichtern so das Stylen und Verbessern der Funktionalität Ihrer Anwendungen.

Das obige ist der detaillierte Inhalt vonWie kann ich dem className-Attribut einer ReactJS-Komponente mehrere Klassen hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!