Im Anschluss an meinen Beitrag über die Verwendung react-konvaals Teil von reciprocal.dev zum Erstellen einer User Journey Map und das anschließende Hinzufügen von Zoom und Panning zu dieser Karte habe ich beschlossen, einige Verbesserungen hinzuzufügen, um die Eigenschaften von Komponenten zu ändern, die auf der Leinwand von außerhalb der Leinwand gerendert werden.

Um diese Verbesserung zu implementieren, musste ich einen App-weiten Status einführen, damit ich sowohl die Interaktion in der Nicht-Canvas-Benutzeroberfläche verfolgen als auch den Wert in den Canvas-Komponenten aktualisieren konnte.

Dazu erstellte ich zunächst einen Kontext, auf den ich dann zugreifen konnte, indem ich den useContextHook in den Komponenten verwendete, die auf die Eigenschaften zugreifen mussten, die der Kontext offenlegte, um den Zustand der App zu ändern.

Ich habe den Kontextanbieter auf der Ebene der Stammkomponente hinzugefügt, damit untergeordnete Komponenten auf den Kontext zugreifen können, und obwohl dies mit den von mir erstellten UI-Elementen zum Anzeigen der Bildschirminformationen gut funktionierte, funktionierte es nicht mit den Komponenten im Zeichenbereich.

Die Komponenten, die untergeordnete Elemente der Stagezum Rendern von Canvas-Elementen verwendeten waren, konnten aufgrund von Bereichsproblemen nicht auf diese Eigenschaften zugreifen.

Zugriff auf den React-Kontext innerhalb einer React-Konva-Stage

Die Lösung zur Umgehung des Scoping-Problems ist relativ einfach, es muss lediglich ein weiterer Kontextanbieter innerhalb der Stage.

Damit der neue Provider den Wert des ursprünglichen Providers wiederverwenden kann, müssen wir einen Consumer um den wickeln Stageund sicherstellen, dass der Wert unserer Kontext-Provider-Komponente durch eine Stütze gesetzt werden kann.

Sobald wir den Anbieter in Stagehaben, können wir den useContextHook innerhalb der Komponenten verwenden, die auf der Leinwand gerendert werden.

Die endgültige Struktur sieht so aus:

Verwenden des React-Kontexts zum Aktualisieren von UI-Elementen bei Statusänderungen

Da der Kontext innerhalb des Canvas zugänglich ist, können wir diesen Kontext verwenden, um einen gemeinsamen Zustand zwischen UI-Elementen außerhalb des Canvas und denen darin zu aktualisieren.

Erstens brauchen wir eine Möglichkeit, einen Wert abzurufen und festzulegen, der über die Nicht-Leinwand-Benutzeroberfläche aktualisiert wird. Dazu verfolgen wir useStateeinen aufgerufenen Wert colourund den Getter und Setter dieses Werts über dessen Wert-Prop an den Anbieter.

Dieser Farbwert wird innerhalb der Nicht-Leinwand-Benutzeroberfläche geändert, die wir aufrufen, setColourwenn der Benutzer einen Wert aus dem Farbauswahlelement auswählt.

Innerhalb der Canvas-Komponenten nehmen wir den colourWert aus dem Kontext und verwenden ihn, um die in der Komponente verwendete Farbe festzulegen.

Sobald der Farbwert von der Canvas-Komponente gelesen und von der Nicht-Canvas-Komponente festgelegt wurde, können wir nun die Farbe von Rectmithilfe des Auswahlfelds festlegen.

Zusammenfassung

Während dieser Beitrag einen sehr einfachen Anwendungsfall abdeckt, gibt es keinen Grund, warum Sie nicht einen React-Kontext verwenden könnten, um den Zustand einer Reihe von Werten zu verfolgen und eine erweiterte Benutzeroberfläche zu erstellen, die es dem Benutzer ermöglicht, Objekte innerhalb des Zeichenbereichs von außerhalb zu aktualisieren.

Eine Demo des freigegebenen Zustands finden Sie in der beispielhaften User Journey Map , die ich als Teil von reciprocal.dev erstellt habe , da hier der in diesem Beitrag erwähnte Ansatz verwendet wird, um den App-Zustand zwischen der Nicht-Canvas-Benutzeroberfläche und der Haupt-Canvas zu verfolgen .