Grundlegendes zu Render-Requisiten anhand eines Beispiels

Hallo Habr! Ich präsentiere Ihnen die Übersetzung des Artikels „Learn Render Props by Example“ .



Ehrlich gesagt, bevor ich mir keine Situationen vorstellte, in denen Sie React-Render-Requisiten anwenden können, sah ich ein praktisches Beispiel deshalb lass uns gehen! Oder Sie können TLDR lesen;

Situation:

Wir werden angewiesen, eine Schaltfläche zu erstellen, die das PayPal-Fenster öffnet:


Wir öffnen unseren Editor und erstellen die PayPalLauncher-Komponente:



PayPalLauncher kann eine Instanz von PayPal mit zusätzlicher Logik enthalten, daher wäre es schön, sie (PayPal) in eine Komponente zu verpacken.

Was aber, wenn Sie zusätzliche PayPal-Artikel verwenden möchten? Zum Beispiel:



Jetzt haben wir zwei Schaltflächen und einen orangefarbenen Link, der das PayPal-Fenster öffnen soll. Schauen wir uns einige Möglichkeiten an, um dies zu implementieren.

Option 1 - Logik in render ()

Zunächst könnten Sie versucht sein, Code in PayPalLauncher zu schreiben:



Hier übergeben wir eine Requisite namens type, um zu bestimmen, welches PayPal-Element gerendert werden soll. Viel Logik, um ein paar visuelle Änderungen auszudrücken. Dies verhindert immer noch, dass wir Komponenten nach Bedarf problemlos rendern können. Was ist, wenn es eine Möglichkeit gibt, Logik von Präsentation zu trennen?

Option 2 - Verschachtelung

Durch das Verschachteln können wir verständlicheres JSX schreiben.



Jetzt haben wir eine klare Trennung zwischen der Logik (PayPalLauncher) und der Ansicht (PayPalButton). Dies gibt uns die Möglichkeit, jede Komponente als PayPal-Element (PayPal-Trigger) anzuzeigen. Und es liest sich gut! Aber wie geben wir Requisiten zwischen PayPalLauncher und PayPalButton weiter? Mal sehen, wie es in PayPalLauncher aussieht:



Was ist hier los ?! Wir klonen Kinder und verpflichten uns, PayPal implizit für jedes Kind zu starten. Dies bedeutet, dass jedes Kind, das Sie in PayPalLauncher investieren, Prop LaunchPayPal akzeptieren muss. Obwohl die Verschachtelung JSX verständlicher macht, ist diese Methode nicht ideal, insbesondere wenn wir versuchen, wiederverwendbare Komponenten mit gemeinsamen Schnittstellen zu erstellen.

Option 3 - Requisiten rendern

Render Requisiten ist eine Methode zum Übertragen von Requisiten von Eltern zu Kindern mithilfe einer Funktion oder eines Verschlusses. Mal sehen, wie es aussieht:



Anstatt props.children als Knoten zu behandeln, erstellen wir einen Abschluss und wählen die Argumente aus, die an die untergeordneten Knoten übergeben werden sollen. In diesem Fall verwenden wir die Instanzmethode der launchPayPal-Klasse.

Wenn wir dies implementieren, sieht die resultierende Version folgendermaßen aus:



Was bedeutet das? Anstelle von Elementen übergeben wir die Funktion als Kind an PayPalLauncher. Aus diesem Grund können wir launchPayPal problemlos an den onClick-Handler der PayPalButton-Komponente übergeben. Jetzt können wir jede benötigte Komponente rendern und das übergeordnete launchPayPal jedem untergeordneten Handler zuordnen.

Ein bisschen mehr:

Ein unerwarteter Vorteil der Verwendung von Render-Requisiten besteht darin, dass mit diesem Ansatz launchPayPal an Page übergeben werden kann und wir weitere Funktionen hinzufügen können. Angenommen, Sie möchten einen Benutzer registrieren und das Formular bestätigen, bevor Sie das PayPal-Fenster öffnen:



Da launchPayPal über Render-Requisiten auf der Seite angezeigt wird, können wir mithilfe der Funktionszusammensetzung problemlos zusätzliche kontextsensitive Funktionen hinzufügen. Hier speichern wir den Unterschied zwischen Page und PayPalLauncher und verwenden Pipe, um die Lesbarkeit zu verbessern.

Zusammenfassung

Was bekommen wir, wenn wir Render-Requisiten verwenden?

• Wiederverwendung von Logik - Wenn Sie die Zuordnung von der Logik trennen, müssen Sie die Logik nicht für jede Komponente oder visuelle Darstellung anpassen.
• Sauberes und gut lesbares JSX.
• Die Struktur und Funktionskomponente unserer React-Anwendungen verbessert sich.

Sorgen Sie sich auch um Ihre React-Apps? Jobs sind offen!

* Denken Sie daran, dass Render-Requisiten ein Muster sind und auf verschiedene Arten implementiert werden können - nur Sie müssen auswählen, was für Ihren Fall verwendet werden soll.