Bedingtes Rendering

Deine Komponenten müssen oft unterschiedliche Dinge anzeigen, je nach verschiedenen Bedingungen. In React kannst du JSX bedingt rendern, indem du JavaScript-Syntax wieif-Anweisungen, den&&-Operator und den? :-Operator verwendest.

JSX bedingt zurückgeben

Nehmen wir an, du hast einePackingList-Komponente, die mehrereItems rendert, die als gepackt oder nicht gepackt markiert sein können:

Beachte, dass einige derItem-Komponenten ihreisPacked-Prop auftruestatt auffalsegesetzt haben. Du möchtest gepackten Gegenständen ein Häkchen (✅) hinzufügen, wennisPacked={true}ist.

Du kannst dies alsif/else-Anweisungschreiben:

Wenn dieisPacked-Proptrueist, gibt dieser Codeeinen anderen JSX-Baum zurück.Mit dieser Änderung erhalten einige der Gegenstände ein Häkchen am Ende:

Versuche, das, was in beiden Fällen zurückgegeben wird, zu bearbeiten, und sieh, wie sich das Ergebnis ändert!

Beachte, wie du mit JavaScriptsif- undreturn-Anweisungen verzweigende Logik erstellst. In React wird der Kontrollfluss (wie Bedingungen) von JavaScript gehandhabt.

Bedingt nichts mitnull zurückgeben

In manchen Situationen möchtest du überhaupt nichts rendern. Nehmen wir zum Beispiel an, du möchtest gepackte Gegenstände gar nicht anzeigen. Eine Komponente muss etwas zurückgeben. In diesem Fall kannst dunullzurückgeben:

WennisPackedwahr ist, gibt die Komponente nichts zurück, alsonull. Andernfalls gibt sie JSX zum Rendern zurück.

In der Praxis ist es nicht üblich,nullaus einer Komponente zurückzugeben, da es einen Entwickler, der sie rendern möchte, überraschen könnte. Häufiger würdest du die Komponente bedingt in das JSX der Elternkomponente ein- oder ausschließen. So geht das!

JSX bedingt einbeziehen

Im vorherigen Beispiel hast du gesteuert, welcher (falls überhaupt!) JSX-Baum von der Komponente zurückgegeben wird. Dir ist vielleicht bereits eine gewisse Duplizierung in der Render-Ausgabe aufgefallen:

ist sehr ähnlich zu

Beide bedingten Zweige geben<li className="item">...</li>zurück:

Während diese Duplizierung nicht schädlich ist, könnte sie Ihren Code schwerer wartbar machen. Was, wenn Sie dieclassNameändern möchten? Sie müssten es an zwei Stellen in Ihrem Code tun! In einer solchen Situation könnten Sie bedingt ein wenig JSX einfügen, um Ihren CodeDRY zu halten.

Bedingter (ternärer) Operator (? :)

JavaScript hat eine kompakte Syntax zum Schreiben eines bedingten Ausdrucks – denbedingten Operatoroder „ternären Operator“.

Anstatt dies:

können Sie dies schreiben:

Sie können es lesen als„wennisPackedwahr ist, dann (?) renderename + ' ✅', andernfalls (:) renderename“.

Nehmen wir nun an, Sie möchten den Text des erledigten Elements in ein anderes HTML-Tag einwickeln, wie<del>, um es durchzustreichen. Sie können noch mehr Zeilenumbrüche und Klammern hinzufügen, um das Verschachteln von mehr JSX in jedem der Fälle zu erleichtern:

Dieser Stil funktioniert gut für einfache Bedingungen, aber verwenden Sie ihn in Maßen. Wenn Ihre Komponenten durch zu viel verschachtelte bedingte Markups unübersichtlich werden, ziehen Sie in Betracht, Kindkomponenten zu extrahieren, um die Dinge aufzuräumen. In React ist Markup Teil Ihres Codes, daher können Sie Werkzeuge wie Variablen und Funktionen verwenden, um komplexe Ausdrücke zu ordnen.

Logischer UND-Operator (&&)

Eine weitere gängige Abkürzung, auf die Sie stoßen werden, ist derJavaScript logische UND (&&) Operator.Innerhalb von React-Komponenten tritt er oft auf, wenn Sie etwas JSX rendern möchten, wenn die Bedingung wahr ist,oder andernfalls nichts rendern.Mit&&könnten Sie das Häkchen nur bedingt rendern, wennisPacked trueist:

Sie können dies lesen als„wennisPacked, dann (&&) rendere das Häkchen, andernfalls rendere nichts“.

Hier in Aktion:

EinJavaScript && Ausdruckgibt den Wert seiner rechten Seite zurück (in unserem Fall das Häkchen), wenn die linke Seite (unsere Bedingung)trueist. Aber wenn die Bedingungfalseist, wird der gesamte Ausdruck zufalse. React betrachtetfalseals eine „Lücke“ im JSX-Baum, genau wienulloderundefined, und rendert nichts an seiner Stelle.

Bedingtes Zuweisen von JSX zu einer Variable

Wenn die Abkürzungen dem Schreiben von einfachem Code im Weg stehen, versuchen Sie, eineif-Anweisung und eine Variable zu verwenden. Sie können Variablen, die mitletdefiniert sind, neu zuweisen, also beginnen Sie damit, den Standardinhalt bereitzustellen, den Sie anzeigen möchten, den Namen:

Verwende eineif-Anweisung, um einen JSX-AusdruckitemContentneu zuzuweisen, wennisPacked trueist:

Geschweifte Klammern öffnen das „Fenster in die JavaScript-Welt“.Bette die Variable mit geschweiften Klammern in den zurückgegebenen JSX-Baum ein, indem du den zuvor berechneten Ausdruck innerhalb von JSX verschachtelst:

Dieser Stil ist der ausführlichste, aber auch der flexibelste. Hier in Aktion:

Wie zuvor funktioniert dies nicht nur für Text, sondern auch für beliebiges JSX:

Wenn du mit JavaScript nicht vertraut bist, könnte diese Vielfalt an Stilen zunächst überwältigend wirken. Sie zu lernen, hilft dir jedoch, jeden JavaScript-Code zu lesen und zu schreiben – und nicht nur React-Komponenten! Wähle zunächst den Stil, den du bevorzugst, und konsultiere diese Referenz später wieder, falls du vergisst, wie die anderen funktionieren.

Zusammenfassung

• In React steuerst du Verzweigungslogik mit JavaScript.
• Du kannst einen JSX-Ausdruck bedingt mit einerif-Anweisung zurückgeben.
• Du kannst bedingt etwas JSX in einer Variable speichern und es dann mithilfe der geschweiften Klammern in anderes JSX einfügen.
• In JSX bedeutet{cond ? <A /> : <B />} „wenncond, rendere<A />, sonst<B />“.
• In JSX bedeutet{cond && <A />} „wenncond, rendere<A />, sonst nichts“.
• Die Kurzformen sind üblich, du musst sie aber nicht verwenden, wenn du einfacheif-Anweisungen bevorzugst.