09.09.2020

Conditional Rendering mit React

Sind Sie an JavaScript-Bibliotheken wie JQuery gewöhnt, bei denen man direkt die DOM manipuliert? Dann kann es anfangs etwas schwer verständlich sein, wie man die DOM mit React manipulieren kann. Hat man allerdings das Konzept verstanden, ist das Entwickeln von React-Komponenten ein Kinderspiel.

If Else

Die einfachste Möglichkeit ist eine simple if-else-Abfrage, bei der man je nach Resultat etwas anderes zurückgibt:

const HelloWordComponent: React.FunctionComponent<HelloWordComponentProps> = ({ sayHello }) => {
  if (sayHello) {
    return <p>Hello World</p>;
  }
  return <p>Goodbye</p>;
};
 

Bonustipp: Wenn man null zurückgibt, wird die Komponente nicht gerendert, aber die Lifecycle-Methoden werden dennoch ausgeführt. Anstatt mehrere Return-Statements zu haben, kann man den Return-Wert natürlich auch in einer Variablen abspeichern, aber der Effekt und das Grundprinzip sind dasselbe.

Ternary Operator

Eine wesentlich elegantere Möglichkeit, um einfache if-else-Abfragen direkt im JSX zu tätigen, sind die sogenannten Ternary Operatoren:

const HelloWordComponent: React.FunctionComponent<HelloWordComponentProps> = ({ sayHello }) => {
  return <p>{sayHello ? "Hello World" : "Goodbye"}</p>;
};
 

Theoretisch könnte man die Ternary Operatoren auch beliebig weit verschachteln, dies führt aber zu unleserlichem Code und ist deshalb nicht zu empfehlen. Es wird daher auch von unserem Eslint Code Analyzer unterbunden.

Wenn man nur den true case der Abfrage braucht, kann man den Code mit dem short-circuit AND Operator weiter optimieren:

const HelloWordComponent: React.FunctionComponent<HelloWordComponentProps> = ({ sayHello }) => {
  return <p>{sayHello && "Hello World"}</p>;
};
 

In diesem Beispiel wird die rechte Seite des && Operators nur dann ausgeführt, wenn der linke Teil truthy ist.

Immediately invoked function expressions (IIFEs)

Falls man komplexere Abfragen durchführen will wie z. B. ein switch case, kann der Einsatz von einer IIFE durchaus Sinn ergeben. Im Wesentlichen schreibt man eine anonyme Funktion, die man auch gleich aufruft:

const HelloWordComponent: React.FunctionComponent<HelloWordComponentProps> = ({ sayHello }) => {
  return (
    <p>
      {(() => {
        switch (sayHello) {
          default:
          case true:
            return "Hello World";
          case false:
            return "Goodbye";
        }
      })()}
    </p>
  );
};
 

Ein switch case auf eine boolean-Variable ist natürlich etwas sinnfrei, dient aber hier lediglich dazu, den Code möglichst simpel zu halten.

Je nach Komplexität können solche IFFEs schnell unleserlich werden. In diesem Fall lohnt es sich, die Logik in eine weitere Komponente auszulagern.