Klassen in ReactJS umschalten

Heute werden wir ein Codebeispiel verwenden, um zu lernen, wie man Klassen in ReactJS umschaltet.

Klassen in ReactJS umschalten

React verwendet die Virtual-DOM-Idee, um die DOM-Elemente zu aktualisieren. Sie können die Klasseneigenschaft eines Elements mithilfe von bedingten Anweisungen ändern, wodurch die Klasse gemäß der Auswahl des Benutzers gerendert wird.

Der bedingte (ternäre) Operator ist der einzige in JavaScript, der drei Operanden akzeptiert. Dieser Operator wird normalerweise verwendet, um einen if...else-Ausdruck zu ersetzen.

Die drei Operanden sind:

1. Auf eine notwendige Bedingung folgt ein Fragezeichen (?).
2. Ein Ausdruck soll ausgeführt werden, wenn die Bedingung true gefolgt von einem Doppelpunkt (:) ist.
3. Dieser Ausdruck wird ausgeführt, wenn die Bedingung false ist.

Syntax:

condition ? expressionIfTrue : expressionIfFalse

Die Verwendung von bedingten Anweisungen innerhalb funktionaler Komponenten wird durch das folgende Beispiel demonstriert. Die Klassenkomponenten können eine ähnliche Strategie verwenden.

const [className, setClassName] = useState('blue')
return (
    <Fragment><p className = {className ? className : 'blue'}>Hello world!
    </p>
      <button onClick={() => setClassName(null)}>Change to Default</button>
    <button onClick = {() => setClassName('red')}>Change to Red<
        /button>
      <button onClick={() => setClassName('yellow')}>Change to Yellow</button>
    <button onClick = {() => setClassName('green')}>Change to
        Green</button>
    </Fragment>)

Im obigen Beispiel haben wir die Variable className definiert. Wenn der Benutzer ihn auf Rot aktualisiert, wird der Wert auf Rot gesetzt, und wenn der Benutzer ihn auf Standard aktualisiert, wird die Klasse Rot entfernt.

Wenn className angegeben ist, verwenden wir diese Klasse; andernfalls verwenden wir blue als Standardklasse. Dies ist nützlich, wenn Sie zahlreiche Klassen haben und möchten, dass die Standard-Klasse verwendet wird, wenn keine vorhanden ist.

Führen Sie den obigen Code in Replit aus (hier ist die Demo), das mit React.js kompatibel ist. Es wird das folgende Ergebnis angezeigt:

Ausgang: