Tiếp theo từ bài đăng của tôi về việc sử dụng react-konvanhư một phần của pasrocal.dev để xây dựng Bản đồ hành trình của người dùng và sau đó thêm tính năng thu phóng và xoay vào bản đồ đã nói, tôi quyết định thêm một số cải tiến để thay đổi thuộc tính của các thành phần được hiển thị trên canvas từ bên ngoài canvas.

Để triển khai tính năng nâng cao này, tôi cần giới thiệu trạng thái toàn ứng dụng để tôi có thể theo dõi cả tương tác trong giao diện người dùng không phải canvas và cập nhật giá trị trong các thành phần canvas.

Để làm điều này, tôi bắt đầu bằng cách xây dựng một ngữ cảnh mà sau đó tôi có thể truy cập, sử dụng useContexthook trong các thành phần cần thiết để truy cập các thuộc tính mà ngữ cảnh tiếp xúc để thay đổi trạng thái của ứng dụng.

Tôi đã thêm trình cung cấp ngữ cảnh ở cấp thành phần gốc để các thành phần con có thể truy cập ngữ cảnh và mặc dù điều này hoạt động tốt với các phần tử giao diện người dùng mà tôi đã tạo để hiển thị thông tin màn hình, nhưng nó không hoạt động với các thành phần trong canvas.

Các thành phần là con của phần Stagetử được sử dụng để kết xuất các phần tử canvas không thể truy cập các thuộc tính này do các vấn đề về phạm vi.

Truy cập bối cảnh React trong Giai đoạn phản ứng-konva

Cách khắc phục để giải quyết vấn đề phạm vi tương đối đơn giản, nó chỉ yêu cầu thiết lập một trình cung cấp ngữ cảnh khác bên trong Stage.

Để nhà cung cấp mới sử dụng lại giá trị từ nhà cung cấp ban đầu, chúng tôi cần bao bọc người tiêu dùng xung quanh Stagevà đảm bảo rằng thành phần trình cung cấp ngữ cảnh của chúng tôi có thể có giá trị được đặt bởi một chỗ dựa.

Khi chúng ta có nhà cung cấp bên trong, Stagechúng ta có thể sử dụng useContexthook bên trong các thành phần sẽ được hiển thị cho canvas.

Cấu trúc cuối cùng trông như thế này:

Sử dụng React Context để cập nhật các phần tử giao diện người dùng khi thay đổi trạng thái

Với ngữ cảnh có thể truy cập từ bên trong canvas, chúng ta có thể sử dụng ngữ cảnh này để cập nhật trạng thái được chia sẻ giữa các phần tử giao diện người dùng bên ngoài canvas và những phần tử bên trong nó.

Đầu tiên, chúng ta cần có một số phương tiện để lấy và đặt một giá trị sẽ được cập nhật thông qua giao diện người dùng không phải canvas. Để làm điều này, chúng tôi sử dụng useStateđể theo dõi một giá trị được gọi colourvà getter và setter của giá trị này cho nhà cung cấp thông qua giá trị hỗ trợ của nó.

Giá trị màu này được thay đổi bên trong giao diện người dùng không phải canvas mà chúng tôi gọi setColourbất cứ khi nào người dùng chọn một giá trị từ phần tử chọn màu.

Trong các thành phần canvas, chúng tôi lấy colourgiá trị từ ngữ cảnh và sử dụng nó để đặt màu được sử dụng trong thành phần.

Khi chúng ta đã có giá trị màu được đọc bởi thành phần canvas và được thiết lập bởi thành phần không phải canvas, bây giờ chúng ta có thể đặt màu của nó Rectbằng cách sử dụng hộp chọn.

Bản tóm tắt

Mặc dù bài đăng này đề cập đến một trường hợp sử dụng rất đơn giản, không có lý do gì bạn không thể sử dụng React Context để theo dõi trạng thái của một số giá trị và xây dựng giao diện người dùng nâng cao cho phép người dùng cập nhật các đối tượng trong canvas từ bên ngoài nó.

Bạn có thể tìm thấy bản trình diễn về trạng thái được chia sẻ trong ví dụ Bản đồ hành trình của người dùng mà tôi đã tạo như một phần của pasrocal.dev , vì điều này sử dụng phương pháp được đề cập trong bài đăng này để theo dõi trạng thái ứng dụng giữa giao diện người dùng không phải canvas và canvas chính .