Seguindo meu post sobre usar react-konvacomo parte de reciprocal.dev para construir um mapa de jornada do usuário e, em seguida, adicionar zoom e panorâmica ao referido mapa, decidi adicionar alguns aprimoramentos para alterar as propriedades dos componentes renderizados na tela de fora da tela.

Para implementar esse aprimoramento, precisei introduzir um estado em todo o aplicativo para que eu pudesse rastrear a interação na interface do usuário que não seja da tela e atualizar o valor nos componentes da tela.

Para fazer isso, comecei construindo um contexto que eu pudesse acessar, usando o useContextgancho nos componentes que precisavam acessar as propriedades que o contexto expunha para alterar o estado do aplicativo.

Adicionei o provedor de contexto no nível do componente raiz para que os componentes filho pudessem acessar o contexto e, embora isso funcionasse bem com os elementos de interface do usuário que eu criei para exibir as informações da tela, não funcionou com os componentes na tela.

Os componentes que eram filhos do Stageusado para renderizar elementos de tela não conseguiram acessar essas propriedades devido a problemas de escopo.

Acessando o React Context dentro de um estágio react-konva

A correção para contornar o problema de escopo é relativamente simples, requer apenas a configuração de outro provedor de contexto dentro do arquivo Stage.

Para que o novo provedor reutilize o valor do provedor original, precisamos envolver um consumidor Stagee garantir que nosso componente de provedor de contexto possa ter seu valor definido por uma prop.

Uma vez que temos o provedor dentro do Stagepodemos usar o useContextgancho dentro dos componentes que serão renderizados para a tela.

A estrutura final fica assim:

Usando o React Context para atualizar os elementos da interface do usuário na mudança de estado

Com o contexto acessível de dentro da tela, podemos usar esse contexto para atualizar um estado compartilhado entre os elementos da interface do usuário fora da tela e aqueles dentro dela.

Em primeiro lugar, precisamos ter alguns meios de obter e definir um valor que será atualizado por meio da interface do usuário não-canvas. Para fazer isso, usamos useStatepara rastrear um valor chamado coloure o getter e setter desse valor para o provedor por meio de sua prop de valor.

Esse valor de cor é alterado dentro da interface do usuário que não é de tela que chamamos setColoursempre que o usuário seleciona um valor do elemento de seleção de cor.

Dentro dos componentes da tela, pegamos o colourvalor do contexto e o usamos para definir a cor usada no componente.

Uma vez que o valor da cor está sendo lido pelo componente canvas e definido pelo componente não-canvas, agora podemos definir a cor do Rectusando a caixa de seleção.

Resumo

Embora esta postagem abranja um caso de uso muito simples, não há motivo para você não usar um React Context para rastrear o estado de vários valores e criar uma interface do usuário avançada que permita ao usuário atualizar objetos dentro da tela de fora dela.

Você pode encontrar uma demonstração do estado compartilhado no exemplo User Journey Map que criei como parte de reciprocal.dev , pois ele usa a abordagem mencionada nesta postagem para rastrear o estado do aplicativo entre a interface do usuário que não é da tela e a tela principal .