Verwenden Sie ternäre Operatoren in React

1. Verwenden Sie ternäre Operatoren in React
2. Verwenden Sie ternäre Operatoren in JSX

React ist ein Framework, das zum Erstellen von Benutzeroberflächen mit mehr Funktionen als einfache HTML-Websites verwendet wird, aber es ist immer noch möglich, das Aussehen von Elementen mithilfe von CSS-Stilen zu ändern.

Insbesondere ternäre Operatoren können verwendet werden, um dynamische Werte zu erzeugen.

Verwenden Sie ternäre Operatoren in React

React-Anwendungen werden üblicherweise in einer Templating-Sprache namens JSX geschrieben. Es ähnelt in vielerlei Hinsicht HTML, bietet aber mehr Funktionen.

Innerhalb von JSX gibt es für React-Entwickler mehrere Möglichkeiten, Bedingungen einzurichten. Sie können die Anweisungen if/else oder switch verwenden, aber eine dritte Möglichkeit ist ein ternärer Operator.

Der ternäre Operator ist eine ziemlich einfache Möglichkeit, eine Bedingung einzurichten und bestimmte Werte basierend darauf, ob sie wahr oder falsch sind, zurückzugeben. Dies kann dynamische Klassen einrichten, dynamische Inline-Stile anwenden oder Zeichenfolgenwerte bedingt rendern.

Mithilfe eines ternären Operators können Sie Ihrer Anwendung sogar benutzerdefinierte Funktionen hinzufügen.

Verwenden Sie ternäre Operatoren in React außerhalb der return-Anweisung

Da React ein JavaScript-basiertes Framework ist, können Sie reguläres JavaScript außerhalb der return-Anweisung verwenden. Hier können beliebige Bedingungen wie if/else oder switch eingestellt werden.

In diesem Beispiel verwenden wir einen ternären Operator, um dynamische Werte für das Attribut className zu generieren. Wir haben einen String und fügen das Ergebnis eines ternären Operators hinzu, der ein weiterer String ist.

Beispiel:

export default function App() {
    const [night, setNight] = useState(true);
    const classNames = "base " + night ? "nightmode" : "";
    return (
        <div className={classNames}>
            <h1>Hello, World</h1>
        </div>
    );
}

In diesem Beispiel haben wir einen ternären Operator verwendet, um einen Klassennamen für den Container <div> bedingt zu generieren. Sie können das Aussehen der Komponente App in dieser Live-Demo überprüfen.

Der endgültige Wert der Variablen classNames hängt vom Wert der Zustandsvariablen night ab. Standardmäßig setzen wir den Wert der Variable night auf true.

Sofern wir diesen Wert nicht mit der Funktion setNight() ändern, gibt der ternäre Operator den Zeichenfolgenwert 'nightmode' zurück.

Verwenden Sie ternäre Operatoren in JSX

JSX ist die Standard-Template-Sprache zum Erstellen von React-Anwendungen. Sie können geschweifte Klammern in JSX verwenden und gültige JavaScript-Ausdrücke dazwischen schreiben, einschließlich eines ternären Operators.

Sie können den ternären Operator verwenden, um dynamische Klassen in React zu konfigurieren. Es ist eine kurze und einfache Syntax.

Zuerst müssen Sie einen JavaScript-Ausdruck schreiben, der true oder false auswertet, gefolgt von einem Fragezeichen.

Danach haben Sie zwei Werte, die durch einen Doppelpunkt getrennt sind. Der erste wird zurückgegeben, wenn die Bedingung wahr ist, und der zweite wird zurückgegeben, wenn sie falsch ist.

Beispiel:

export default function App() {
    const [night, setNight] = useState(true);
    return (
        <div className={"base " + night ? "nightmode" : ""}>
            <h1>Hello, World</h1>
        </div>
    );
}

Auf diese Weise können Sie dynamische Werte inline generieren. Sie können auch einen ternären Operator verwenden, um Texte dynamisch zu rendern. Beispielsweise um im Fehlerfall einen Fehlertext auszugeben.

Beispiel:

export default function App() {
    const [night, setNight] = useState(true);
    const [error, setError] = useState(false);
    const classNames = "base" + night ? "nightmode" : "";
    const handleInputChange = (data) => {
        if (data.indexOf("@") == true) {
            return null;
        } else {
            setError(true);
        }
    };
    return (
        <div>
            <div className={classNames}>
                <h1>Hello, World</h1>
            </div>
            Enter your email address:
            <input onChange={(e) => handleInputChange(e.target.value)}></input>
            <p style={{ color: error ? "red" : "black" }}>
                {error ? "please enter a valid email address" : "Everything is fine"}
            </p>
        </div>
    );
}

Hier fordern wir Benutzer auf, ihre E-Mail-Adressen einzugeben, und führen eine sehr einfache Überprüfung durch, um sicherzustellen, dass ihre Eingaben mit allgemeinen Mustern von E-Mail-Adressen übereinstimmen.

Zuerst haben wir ein <input>-Element erstellt und auf das onChange-Ereignis gelauscht, um den handleInputChange()-Event-Handler aufzurufen. Alles, was wir in das Texteingabeelement eingeben, wird als Argument an den Ereignishandler übergeben.

Im Event-Handler haben wir eine einfache if/else-Anweisung verwendet, um den von Benutzern bereitgestellten Wert zu überprüfen. Wenn es das Symbol @ enthält, besteht der Wert den Test und wir können davon ausgehen, dass es sich um eine gültige E-Mail-Adresse handelt.

Falls nicht, schlagen wir mit der Funktion setError Alarm.

Wir haben die Zustandsvariable Fehler verwendet, ein boolescher Wert, der angibt, ob Benutzer alarmiert werden sollen oder nicht. Wir haben auch eine setError-Funktion definiert, die verwendet wird, um den Wert dieser Zustandsvariablen zu aktualisieren.

Schließlich haben wir einen ternären Operator verwendet, um zu prüfen, ob wir einen Text anzeigen sollten, der Benutzer vor der Eingabe einer gültigen E-Mail-Adresse warnt. Wenn die Zustandsvariable Fehler wahr ist, gibt unser ternärer Operator eine Warnmeldung zurück; Wenn nicht, wird die Zeichenfolge Alles ist gut zurückgegeben.

Wir wenden auch bedingt Stile an, um den Text rot zu machen, wenn er eine Warnmeldung für zusätzliche Vorteile für die UX enthält. Andernfalls bleibt die standardmäßige schwarze Farbe erhalten.