Melanjutkan dari posting saya tentang penggunaan react-konvasebagai bagian dari reciprocal.dev untuk membangun Peta Perjalanan Pengguna dan kemudian menambahkan zoom dan panning ke peta tersebut, saya memutuskan untuk menambahkan beberapa peningkatan untuk mengubah properti komponen yang dirender di kanvas dari luar kanvas.

Untuk mengimplementasikan peningkatan ini, saya perlu memperkenalkan status di seluruh aplikasi sehingga saya dapat melacak interaksi di UI non-kanvas dan memperbarui nilai dalam komponen kanvas.

Untuk melakukan ini, saya mulai dengan membangun konteks yang kemudian dapat saya akses, menggunakan useContextpengait di komponen yang diperlukan untuk mengakses properti konteks yang diekspos untuk mengubah status aplikasi.

Saya menambahkan penyedia konteks di tingkat komponen akar sehingga komponen anak dapat mengakses konteks dan sementara ini bekerja dengan baik dengan elemen UI yang saya buat untuk menampilkan informasi layar, itu tidak berfungsi dengan komponen di kanvas.

Komponen yang merupakan turunan dari Stageelemen kanvas yang digunakan untuk merender tidak dapat mengakses properti ini karena masalah pelingkupan.

Mengakses Konteks Bereaksi dalam Tahap reaksi-konva

Perbaikan untuk mengatasi masalah pelingkupan relatif sederhana, hanya perlu menyiapkan penyedia konteks lain di dalam file Stage.

Untuk penyedia baru untuk menggunakan kembali nilai dari penyedia asli, kita perlu membungkus konsumen di sekitar Stagedan memastikan bahwa komponen penyedia konteks kita dapat memiliki nilai yang ditetapkan oleh prop.

Setelah kami memiliki penyedia di dalam, Stagekami dapat menggunakan useContextpengait di dalam komponen yang akan dirender ke kanvas.

Struktur akhir terlihat seperti ini:

Menggunakan React Context untuk memperbarui elemen UI pada perubahan status

Dengan konteks yang dapat diakses dari dalam kanvas, kita dapat menggunakan konteks ini untuk memperbarui status bersama antara elemen UI di luar kanvas dan elemen di dalamnya.

Pertama kita perlu memiliki beberapa cara untuk mendapatkan dan menetapkan nilai yang akan diperbarui melalui UI non-kanvas. Untuk melakukan ini, kami menggunakan useStateuntuk melacak nilai yang dipanggil colourdan pengambil dan penyetel nilai ini ke penyedia melalui prop nilainya.

Nilai warna ini diubah di dalam UI non-kanvas yang kami panggil setColoursetiap kali pengguna memilih nilai dari elemen pemilihan warna.

Di dalam komponen kanvas, kami mengambil colournilai dari konteks dan menggunakannya untuk mengatur warna yang digunakan dalam komponen.

Setelah kita mendapatkan nilai warna yang dibaca oleh komponen kanvas dan disetel oleh komponen non-kanvas, sekarang kita dapat mengatur warna Rectmenggunakan kotak pilih.

Ringkasan

Meskipun posting ini mencakup kasus penggunaan yang sangat sederhana, tidak ada alasan mengapa Anda tidak dapat menggunakan React Context untuk melacak status sejumlah nilai dan membangun UI lanjutan yang memungkinkan pengguna memperbarui objek di dalam kanvas dari luarnya.

Anda dapat menemukan demo status bersama dalam contoh Peta Perjalanan Pengguna yang saya buat sebagai bagian dari reciprocal.dev , karena ini menggunakan pendekatan yang disebutkan dalam posting ini untuk melacak status aplikasi antara UI non-kanvas dan kanvas utama .