Mehrere classNames zur React-Komponente hinzufügen

1. Verwenden Sie die Template Literals-Methode, um der React-Komponente mehrere classNames hinzuzufügen
2. Verwenden Sie das Paket classnames, um mehrere classNames zur React-Komponente hinzuzufügen
3. Verwenden Sie das classnames-Paket und die .map-Methode, um mehrere classNames zur React-Komponente hinzuzufügen
4. Fazit

classNames in React erfüllen die gleiche Funktion wie Klassen in JavaScript. Sie werden anstelle von Klassen verwendet, da Klasse ein reserviertes Wort in React ist.

Das Hinzufügen mehrerer classNames zu einer Komponente gibt uns Raum, einige Bedingungen für diese Komponente festzulegen. Ein className wird verwendet, um das Styling festzulegen; der andere wird verwendet, um die Bedingungen festzulegen.

Dies ist ideal, wenn wir Webseiten mit Schaltflächen erstellen.

Darüber hinaus möchten wir einer Komponente möglicherweise zusätzliches Styling hinzufügen, um das ursprüngliche Styling in bestimmten Situationen zu überschreiben. Durch das Hinzufügen eines zusätzlichen className können wir dies reibungslos tun.

Außerdem erleichtert die Verwendung mehrerer classNames zum Festlegen des Stils das Lesen, Verfolgen und Anpassen von CSS-Dateien, da ein einzelner className mit zu vielen Stilen überladen werden könnte. Außerdem sollten wir in Situationen, in denen mehrere CSS-Klassen ähnliche Attribute haben, eine weitere Klasse für ähnliche Attribute erstellen, um Korrekturen und Erweiterungen zu erleichtern.

Sehen wir uns verschiedene Möglichkeiten an, einer Komponente mehrere classNames hinzuzufügen.

Verwenden Sie die Template Literals-Methode, um der React-Komponente mehrere classNames hinzuzufügen

Die Template-Literale, auch Template-Strings genannt, ermöglichen es Benutzern, mehrere Ausdrücke zu erstellen und zu manipulieren, die in Backticks eingeschlossen sind, gefolgt vom $-Zeichen und geschweiften Klammern.

Wir werden ein Beispiel für eine Schaltflächen-Webseite erstellen, die den Effekt mehrerer classNames zeigt, wobei CSS-Stile daneben verwendet werden. Navigieren Sie zur Datei App.js unseres Projektordners und schreiben Sie diese Codes:

Code-Snippet – App.js:

import React from "react";
import "./App.css";
export default function App() {
  const [classNames, setClassNames] = React.useState(``);
  const [showRed, setShowRed] = React.useState(false);
  const [showBlue, setShowBlue] = React.useState(false);
  React.useEffect(() => {
    setClassNames(`${showRed ? "red" : ""} ${showBlue ? "blue" : ""}`);
  }, [showRed, showBlue]);
  return (
    <div>
      <button onClick={() => setShowRed(showRed => !showRed)}>
        Toggle Red
      </button>
      <button onClick={() => setShowBlue(showBlue => !showBlue)}>
        Toggle Light Blue
      </button>
      <div className={classNames}>hit me!</div>
    </div>
  );
}

Die Template-Literale sind praktisch, um classNames unterzubringen, wenn wir die setClassNames-Funktionen aufrufen. Hier können wir unsere Klassen jeweils auf rot und blau setzen.

Dann werden wir ein wenig in der Datei App.css programmieren:

Codeschnipsel – App.css:

.red {
  color: red;
}.blue {
  background-color: lightblue;
  width: 50px;
}

Ausgabe:

Wir haben den Ereignis-Listener button onClick verwendet, um React mitzuteilen, was zu tun ist, wenn eine der beiden Tasten gedrückt wird. Wenn wir eine der Schaltflächen drücken, können wir sehen, dass ein className aktiv wurde, und wenn wir die andere Schaltfläche drücken, wird der andere className aufgerufen und die Farben ändern sich.

Verwenden Sie das Paket classnames, um mehrere classNames zur React-Komponente hinzuzufügen

Einer der Gründe, warum React weithin akzeptiert wird, ist, dass es dank seiner Abhängigkeitspakete unbegrenzten Raum für potenzielle Entwicklungen und Optimierungen bietet.

Das Paket classnames ist eine weitere Methode, die wir anwenden können, um einer Komponente mehrere classNames hinzuzufügen. Es hilft uns, weniger Code zu schreiben als die Methode der Vorlagenliterale und wird besser angewendet, wenn es um mehr als zwei classNames geht.

Sobald wir unseren Projektordner erstellt haben, navigieren wir zu dem Projektordner, der sich immer noch im internen Ordner befindet, und installieren das Paket classnames mit:

npm install classnames

Dann beginnen wir mit dem Codieren, beginnend mit der Datei App.js.

Wir verwenden das gleiche Styling wie im ersten Beispiel. Wir werden das CSS-Snippet hier nicht wiederholen.

Code-Snippet – App.js:

import React from "react";
import "./App.css";
const classNames = require("classnames");

export default function App() {
  const [showRed, setShowRed] = React.useState(false);
  const [showBlue, setShowBlue] = React.useState(false); return (
    <div>
      <button onClick={() => setShowRed(showRed => !showRed)}>
        Toggle Red
      </button>
      <button onClick={() => setShowBlue(showBlue => !showBlue)}>
        Toggle Light Blue
      </button>
      <div className={classNames({ red: showRed, blue: showBlue })}>
        hello
      </div>
    </div>
  );
}

Ausgabe:

Das classnames-Paket wird angewendet und in ein div verpackt, wo wir die classNames für jede unserer Komponenten festlegen und dann den onClick-Ereignis-Listener verwenden, um die Zustände jeder Klasse zu ändern.

Wir können sehen, dass jeder className ein-/ausgeschaltet wird, wenn wir auf eine der den Klassen zugewiesenen Schaltflächen klicken.

Verwenden Sie das classnames-Paket und die .map-Methode, um mehrere classNames zur React-Komponente hinzuzufügen

Wenn wir denselben Stil gleichzeitig auf mehrere Klassen anwenden möchten, können wir das classnames-Paket zusammen mit der .map-Methode verwenden. Die .map-Methode ist eine JavaScript-Funktion, die uns hilft, eine Funktion über ähnliche Elemente zu übertragen.

Sobald wir unseren Projektordner erstellt haben, navigieren wir zum Projektordner, der sich immer noch im internen Ordner befindet, und installieren das Paket classnames mit:

npm install classnames

Als nächstes fahren wir mit der Codierung fort; zuerst mit der Datei App.js:

Code-Snippet – App.js:

import React from "react";
import "./App.css";
const classNames = require("classnames");

export default function App() {
  const [showRed, setShowRed] = React.useState(false);
  return (
    <div>
      {["foo", "bar", "baz"].map(buttonType => (
        <button
          className={classNames({ [`btn-${buttonType}`]: showRed })}
          onClick={() => setShowRed(showRed => !showRed)}
        >
          Button {buttonType}
        </button>
      ))}
    </div>
  );
}

Nachdem wir unsere classNames deklariert haben, bildet die .map-Funktion alle drei Klassen auf das buttonType-Objekt ab. Dadurch können wir dieselbe Funktion über mehrere Klassen hinweg übergeben.

Dann sieht unsere App.css so aus:

.btn-foo,
.btn-bar,
.btn-baz {
  color: red;
}

Ausgabe:

Wir haben allen Klassen die gleiche Farbe zugewiesen, und der Ereignis-Listener onClick hat diese CSS-Funktion aktiviert, wenn wir irgendwelche Schaltflächen umgeschaltet haben.

Fazit

Die Arbeit mit mehreren Klassen in React ermöglicht es uns, verschiedene Kombinationen auszuprobieren, sodass wir verschiedene Möglichkeiten haben, ein Hindernis zu umgehen. Und weil es uns ermöglicht, mehrere Stile und Bedingungen innerhalb einer Komponente auszuführen, ist die Codierung viel flexibler und wir können Fehler und Bugs punktgenau erkennen.