Verwenden der switch-Anweisung in einer React-Komponente

1. Verwendung von switch in React (JSX)
2. Alternativen zu switch() in React
3. Zusammenfassung

Die switch-Anweisung ist eine der nützlichsten Funktionen von JavaScript.

Es ist perfekt, um Bedingungen einzurichten und einen bestimmten Wert zurückzugeben, je nachdem, ob diese Bedingungen erfüllt sind oder nicht. In React ist eine switch-Anweisung eine der besten Möglichkeiten, um bedingtes Rendern zu handhaben.

Beispielsweise möchten Sie möglicherweise eine bestimmte Komponente basierend auf Benutzereingaben rendern. Sie können den Wert von input-Feldern im Status speichern und den Statuswert untersuchen, um die richtige Komponente zum Rendern zu bestimmen.

Die meisten React-Entwickler verwenden JSX, um Komponenten zu definieren und sie aufzurufen. Auf den ersten Blick sieht JSX sehr nach HTML aus, daher ist es einfach zu lesen und bei Bedarf zu ändern.

Es erlaubt uns auch, JavaScript-Ausdrücke innerhalb des JSX-Codes zu verwenden. Die Unterstützung ist jedoch auf JavaScript-Ausdrücke beschränkt und erstreckt sich nicht auf Anweisungen wie for oder switch.

Lesen Sie dieses Handbuch, um mehr über die Unterschiede zwischen Anweisungen und Ausdrücken zu erfahren.

In diesem Artikel werden mehrere Möglichkeiten zur Verwendung von switch() (oder seinen gültigen Ersetzungen) in JSX erörtert.

Verwendung von switch in React (JSX)

JSX ist eine React-Syntax, mit der wir Komponenten und UI-Elemente erstellen können, ohne die Funktion .createElement() zu verwenden. Es hat auch viele zusätzliche Funktionen, die HTML nicht hat.

Sie können beispielsweise regulären JavaScript-Code in JSX schreiben. Alles, was Sie tun müssen, ist, die Ausdrücke zwischen geschweiften Klammern zu setzen.

Schauen wir uns ein Beispiel an:

class App extends Component {
  render() {
    return <h1>Two plus two is {2+2}</h1>;
  }
}

Hier haben wir eine Komponente, die ein einzelnes Überschriftenelement zurückgibt.

Wie Sie im Playcode sehen können, wird das 2+2 als gültiger JavaScript-Ausdruck behandelt, da es zwischen zwei geschweiften Klammern steht. Dies ist eine einfache Demonstration einer überzeugenden Funktion.

Wenn Sie React-Anwendungen entwickeln, sollten Sie vermeiden, zu viel Logik in Ihre JSX-Struktur einzubauen. Dies ist notwendig, um Ihren Code nicht zu überladen.

Stattdessen können Sie eine Funktion oder Variable außerhalb der return-Anweisung definieren und in Ihrem JSX-Code darauf verweisen.

Entwickler können switch-Anweisungen nicht direkt in JSX schreiben. Erstens wäre es zu langwierig, und was noch wichtiger ist, Anweisungen werden in JSX nicht unterstützt.

switch außerhalb der Return-Anweisung

Die wahrscheinlich optimalste Lösung besteht darin, switch() vollständig aus Ihrer return-Anweisung zu streichen. Dann können Sie Standard-JavaScript ohne Einschränkungen verwenden und auf die Funktion verweisen, die die Anweisung switch enthält.

Schauen wir uns ein Beispiel an:

class App extends Component {
  render() {
    const functionWithSwitch = (parameter) => {
      switch(parameter){
        case "positive":
          return "+"
        case "negative": 
          return "-"
        default:
          return "neutral"
      }
    }
    return <h1>{functionWithSwitch("positive")}</h1>;
  }
}

In diesem Beispiel haben wir eine einfache functionWithSwitch()-Funktion, die die switch-Anweisung enthält und basierend auf dem Parameterwert drei verschiedene Werte zurückgibt. Anstatt all dies in JSX zu definieren, tun wir es separat, verweisen auf die Funktion und übergeben sie an den gewünschten Wert.

Inline-Schalter

Wir haben bereits erwähnt, dass es unmöglich ist, switch direkt in JSX zu verwenden, aber es gibt Möglichkeiten, diese Regel zu umgehen.

Für einige Leute sind Inline-Lösungen einfacher zu lesen und zu verstehen, was vor sich geht. Sie müssen Ihre Aufmerksamkeit nicht hin und her zur Funktionsdefinition und zum Aufruf lenken, um herauszufinden, was vor sich geht.

Technisch gesehen ist diese Lösung kein Switch, aber sie funktioniert genau so. Schauen wir uns ein Beispiel an:

class App extends Component {
  render() {
    return <h1>
          {
        	{
          'positive': '+',
          'negative': '-'
        	}[param]
      	  }   
      </h1>;
  }
}

Hier verwenden wir ein einfaches JavaScript-Objekt, um eine Zeichenfolge bedingt zu rendern. In diesem Fall hat es zwei Eigenschaften mit zwei Werten. Letztendlich erhalten Sie einen Wert der Eigenschaft, auf die Sie als param verweisen.

Um bei diesem Ansatz einen Standardfall einzurichten, müssen Sie den logischen Operator OR (||) verwenden.

Selbstaufrufende Funktion

Bei Bedarf können Sie auch den gesamten switch-bezogenen Code in eine Funktion packen und diese automatisch innerhalb von JSX aufrufen. Dies ist eine etwas langwierige Lösung, die jedoch gelegentlich erforderlich sein kann.

Schauen wir uns ein Beispiel an:

class App extends Component {
  render() {
    return <h1>{( () => {
      switch(parameter){
        case "positive":
          return "+"
        case "negative": 
          return "-"
        default:
          return "neutral"
      }
    })()}</h1>;
  }
}

Wir haben das vorherige Funktionsbeispiel genommen und es sofort aufgerufen, um einen Wert zurückzugeben. Auch hier gibt es bessere Möglichkeiten, switch-Anweisungen in JSX zu verwenden, aber dies ist immer noch eine gute Lösung.

Benutzerdefiniertes Element Switch

Die Popularität von React lässt sich größtenteils auf seine wiederverwendbaren Komponenten zurückführen.

Das Erstellen einer benutzerdefinierten Switch-Komponente erspart Ihnen die Mühe, komplexe Inline-Logik zu schreiben. Außerdem müssen Sie nicht hin und her springen, um zu verstehen, was eine Funktion tut.

Die benutzerdefinierte <Switch />-Komponente nimmt eine Requisite und abhängig von ihrem Wert; es wird eine der untergeordneten Komponenten gerendert, die zwischen den öffnenden und schließenden Tags der Switch-Komponente platziert ist.

Schauen wir uns ein Beispiel an:

let SwitchComponent = props => {
    const {condition, childrenElements} = props
    return childrenElements.find(element => {
        return element.props.value === condition
    })
}

Wir können eine <Switch>-Komponente aufrufen und Kinder mit benutzerdefinierten Werten in der übergeordneten Komponente hinzufügen. Dies ähnelt dem Schreiben verschiedener cases in die switch-Anweisung.

Schauen wir uns ein Beispiel an, basierend auf der zuvor geschriebenen switch-Anweisung:

<Switch test="positive">
<p value={"positive"}>+</p>
<p value={"negative"}>-</p>
</Switch>

In diesem Fall rendert die Komponente Switch aufgrund des Werts des Props test nur das Absatzelement mit einem positiven Wert.

Alternativen zu switch() in React

React-Entwickler verwenden häufig einen ternären Operator für eine einfache bedingte Logik, die eine Bedingung akzeptiert und basierend auf der Bedingung eine der Komponenten zurückgibt. Der ternäre Operator kann in JSX direkt zwischen geschweiften Klammern geschrieben werden; es ist einfach, leicht lesbar und nützlich.

Schauen wir uns unser Beispiel an und schreiben dieselbe Bedingung mit dem ternären Operator:

<h1>{condition === "positive" ? "+" : "-"}</h1>

Dies ist eine relativ einfache Lösung. Natürlich hat es seine Grenzen und würde mit komplexerer Logik nicht funktionieren.

Zusammenfassung

In diesem Artikel wurden viele verschiedene Möglichkeiten zum bedingten Rendern einer Komponente beschrieben. Alle diese Lösungen sind gültige Optionen, und Ihre Wahl sollte letztendlich von Ihren eigenen Vorlieben oder den Vorlieben Ihres Teams abhängen.