Следуя моему сообщению об использовании react-konvaкак части reciprocal.dev для создания карты пути пользователя , а затем добавив масштабирование и панорамирование к указанной карте, я решил добавить некоторые улучшения для изменения свойств компонентов, отображаемых на холсте из-за пределов холста.

Чтобы реализовать это улучшение, мне нужно было ввести состояние для всего приложения, чтобы я мог отслеживать как взаимодействие в пользовательском интерфейсе без холста, так и обновлять значение в компонентах холста.

Чтобы сделать это, я начал с создания контекста, к которому я мог затем получить доступ, используя useContextхук в компонентах, которые должны были получить доступ к свойствам, предоставляемым контекстом для изменения состояния приложения.

Я добавил поставщика контекста на уровне корневого компонента, чтобы дочерние компоненты могли получить доступ к контексту, и хотя это хорошо работало с элементами пользовательского интерфейса, которые я создал для отображения информации на экране, это не работало с компонентами на холсте.

Компоненты, которые были Stageдочерними элементами используемых для рендеринга элементов холста, не могли получить доступ к этим свойствам из-за проблем с областью действия.

Доступ к React Context на этапе react-konva

Исправление для решения проблемы с областью действия относительно простое, оно просто требует настройки другого поставщика контекста внутри файла Stage.

Чтобы новый провайдер повторно использовал значение из исходного провайдера, нам нужно обернуть потребителя вокруг Stageи убедиться, что наш компонент провайдера контекста может иметь значение, установленное реквизитом.

Когда у нас есть провайдер внутри, Stageмы можем использовать useContextхук внутри компонентов, которые будут отображаться на холсте.

Окончательная структура выглядит так:

Использование контекста React для обновления элементов пользовательского интерфейса при изменении состояния

Имея контекст, доступный изнутри холста, мы можем использовать этот контекст для обновления общего состояния между элементами пользовательского интерфейса вне холста и внутри него.

Во-первых, нам нужно иметь какие-то средства для получения и установки значения, которое будет обновляться через пользовательский интерфейс без холста. Для этого мы используем useStateдля отслеживания вызываемого значения, colourа также средства получения и установки этого значения для поставщика через его значение.

Это значение цвета изменяется внутри пользовательского интерфейса без холста, который мы вызываем setColourвсякий раз, когда пользователь выбирает значение из элемента выбора цвета.

В компонентах холста мы берем colourзначение из контекста и используем его для установки цвета, используемого в компоненте.

Как только мы получили значение цвета, считываемое компонентом холста и устанавливаемое компонентом, не являющимся холстом, теперь мы можем установить цвет с Rectпомощью поля выбора.

Резюме

Хотя в этом посте рассматривается очень простой вариант использования, нет никаких причин, по которым вы не могли бы использовать контекст React для отслеживания состояния ряда значений и создания расширенного пользовательского интерфейса, который позволяет пользователю обновлять объекты внутри холста извне.

Вы можете найти демонстрацию общего состояния в примере User Journey Map , который я создал как часть reciprocal.dev , так как он использует подход, упомянутый в этом посте, для отслеживания состояния приложения между пользовательским интерфейсом без холста и основным холстом. .