Grundlegendes zum Rendern von Requisiten anhand eines Beispiels

Hallo habr Ich präsentiere Ihnen die Übersetzung des Artikels "Learn Render Props by Example" .

Bild

Ehrlich gesagt, bevor ich mir keine Situationen vorgestellt habe, in denen Sie React Render Requisiten anwenden können, bis ich ein praktisches Beispiel gesehen habe, lass uns gehen! Oder Sie können TLDR lesen;

Situation:

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

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

Bild

PayPalLauncher enthält möglicherweise eine PayPal-Instanz mit zusätzlicher Logik, daher wäre es schön, sie (PayPal) in die Komponente einzubinden.

Aber was ist, wenn Sie zusätzliche PayPal-Artikel verwenden möchten? Zum Beispiel:

Bild

Jetzt haben wir zwei Buttons und einen orangefarbenen Link, der das PayPal-Fenster öffnen soll. Schauen wir uns ein paar Möglichkeiten an, dies umzusetzen.

Option 1 - Logic in render ()

Zuerst könnten Sie versucht sein, Code in PayPalLauncher zu schreiben:

Bild

Hier übergeben wir eine Requisite mit dem Namen type, um zu bestimmen, welches PayPal-Element gerendert werden soll. Viel Logik, um ein paar optische Veränderungen auszudrücken. Dies hindert uns immer noch daran, Komponenten bei Bedarf einfach zu rendern. Was ist, wenn es eine Möglichkeit gibt, die Logik von der Präsentation zu trennen?

Option 2 - Schachteln

Schachteln hilft uns, verständlicheres JSX zu schreiben.

Bild

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 übergeben wir Requisiten zwischen PayPalLauncher und PayPalButton? Mal sehen, wie es in PayPalLauncher aussieht:

Bild

Was ist hier los ?! Wir klonen Kinder und verpflichten uns, PayPal implizit jedem Kind zur Verfügung zu stellen. Dies bedeutet, dass jedes Kind, das Sie in PayPalLauncher investieren, die Verwendung von launchPayPal akzeptieren muss. Obwohl uns das Verschachteln verständlicher macht, ist diese Methode nicht ideal, insbesondere wenn wir versuchen, wiederverwendbare Komponenten mit gemeinsamen Schnittstellen zu erstellen.

Option 3 - Requisiten rendern

Render Props ist eine Methode, mit der Requisiten mithilfe einer Funktion oder eines Verschlusses von einem Elternteil an ein Kind übertragen werden. Mal sehen, wie es aussieht:

Bild

Anstatt props.children als Knoten zu verarbeiten, 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 Option folgendermaßen aus:

Bild

Was bedeutet das? Anstelle von Elementen geben wir die Funktion als Kind an PayPalLauncher weiter. 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 den übergeordneten launchPayPal einem 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 mehr Funktionen hinzufügen können.

Bild

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 einer Zusammenstellung von Funktionen 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 bei der Verwendung von Render Requisiten?

  • Wiederverwendung von Logik - Trennen Sie die Zuordnung von der Logik. Sie müssen 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 Sie für Ihren Fall verwenden möchten.

Jetzt auch beliebt: