Kontynuując mój post dotyczący wykorzystania react-konvaw ramach reciprocal.dev do zbudowania User Journey Map , a następnie dodania powiększenia i panoramowania do wspomnianej mapy, zdecydowałem się dodać kilka ulepszeń, aby zmienić właściwości komponentów renderowanych na kanwie spoza kanwy.

Aby zaimplementować to ulepszenie, musiałem wprowadzić stan całej aplikacji, aby móc śledzić zarówno interakcję w interfejsie użytkownika innym niż kanwa, jak i aktualizować wartość w komponentach kanwy.

Aby to zrobić, zacząłem od zbudowania kontekstu, do którego mogłem następnie uzyskać dostęp, używając useContexthaka w komponentach, które potrzebowały dostępu do właściwości kontekstu wystawionego na zmianę stanu aplikacji.

Dodałem dostawcę kontekstu na poziomie komponentu głównego, aby komponenty podrzędne mogły uzyskać dostęp do kontekstu i chociaż działało to dobrze z elementami interfejsu użytkownika, które stworzyłem do wyświetlania informacji na ekranie, nie działało z komponentami na kanwie.

Komponenty, które były Stageelementami podrzędnymi elementu używanego do renderowania elementów kanwy, nie mogły uzyskać dostępu do tych właściwości z powodu problemów z zakresem.

Uzyskiwanie dostępu do kontekstu reakcji na etapie reakcji react-konva

Rozwiązanie problemu z określaniem zakresu jest stosunkowo proste, wymaga jedynie skonfigurowania innego dostawcy kontekstu w Stage.

Aby nowy dostawca mógł ponownie użyć wartości z pierwotnego dostawcy, musimy otoczyć konsumenta Stagei upewnić się, że nasz komponent dostawcy kontekstu może mieć swoją wartość ustawioną przez właściwość.

Gdy już mamy dostawcę wewnątrz Stage, możemy użyć useContexthaka w komponentach, które zostaną wyrenderowane na kanwie.

Ostateczna struktura wygląda tak:

Używanie kontekstu reakcji do aktualizacji elementów interfejsu użytkownika po zmianie stanu

Dzięki kontekstowi dostępnemu z wnętrza płótna możemy użyć tego kontekstu do aktualizacji współdzielonego stanu między elementami interfejsu użytkownika poza płótnem a tymi, które się w nim znajdują.

Po pierwsze, musimy mieć jakiś sposób na uzyskanie i ustawienie wartości, która będzie aktualizowana za pośrednictwem interfejsu użytkownika innego niż kanwa. Aby to zrobić, używamy useStatedo śledzenia wywoływanej wartości colouroraz funkcji pobierającej i ustawiającej tę wartość do dostawcy za pośrednictwem jej właściwości wartości.

Ta wartość koloru jest zmieniana w interfejsie użytkownika innym niż kanwa, który wywołujemy setColourza każdym razem, gdy użytkownik wybierze wartość z elementu wyboru koloru.

W komponentach canvas pobieramy colourwartość z kontekstu i używamy jej do ustawienia koloru użytego w komponencie.

Gdy już mamy wartość koloru odczytaną przez komponent canvas i ustaloną przez komponent inny niż canvas, możemy teraz ustawić kolor Rectpola wyboru.

Streszczenie

Chociaż ten post dotyczy bardzo prostego przypadku użycia, nie ma powodu, dla którego nie można użyć kontekstu reakcji do śledzenia stanu wielu wartości i zbudowania zaawansowanego interfejsu użytkownika, który pozwala użytkownikowi aktualizować obiekty na kanwie spoza niego.

Demonstrację stanu udostępnionego można znaleźć w przykładzie User Journey Map , który zbudowałem w ramach reciprocal.dev , ponieważ wykorzystuje podejście wspomniane w tym poście do śledzenia stanu aplikacji między interfejsem użytkownika innym niż kanwa i głównym płótnem .