reciprocal.devreact-konvaの一部として使用してユーザー ジャーニー マップを作成し、そのマップにズームとパンを追加するという私の投稿に続いて、キャンバスにレンダリングされたコンポーネントのプロパティをキャンバスの外側から変更するための拡張機能を追加することにしました。

この拡張機能を実装するには、アプリ全体の状態を導入する必要がありました。これにより、キャンバス以外の UI でのやり取りを追跡し、キャンバス コンポーネントの値を更新できるようになります。

useContextこれを行うために、アプリの状態を変更するためにコンテキストが公開するプロパティにアクセスする必要があるコンポーネントのフックを使用して、アクセスできるコンテキストを構築することから始めました。

子コンポーネントがコンテキストにアクセスできるように、ルート コンポーネント レベルでコンテキスト プロバイダーを追加しました。これは、画面情報を表示するために作成した UI 要素ではうまく機能しましたが、キャンバス内のコンポーネントでは機能しませんでした。

キャンバス要素のレンダリングに使用される の子であったコンポーネントは、Stageスコープの問題により、これらのプロパティにアクセスできませんでした。

react-konva ステージ内で React コンテキストにアクセスする

スコーピングの問題を回避するための修正は比較的簡単ですStage。

新しいプロバイダーが元のプロバイダーの値を再利用するには、コンシューマーをラップしStageて、コンテキスト プロバイダー コンポーネントが prop によって設定された値を持つことができるようにする必要があります。

プロバイダーを内部に配置したら、キャンバスにレンダリングされるコンポーネント内でフックをStage使用できます。useContext

最終的な構造は次のようになります。

React Context を使用して状態変化時に UI 要素を更新する

キャンバス内からコンテキストにアクセスできるので、このコンテキストを使用して、キャンバス外の UI 要素とキャンバス内の UI 要素の間の共有状態を更新できます。

まず、非キャンバス UI を介して更新される値を取得および設定する手段が必要です。これを行うために、呼び出された値と、この値の getter および setter を、その値 prop を介してプロバイダーuseStateに追跡するために使用します。colour

setColourこの色の値は、ユーザーが color select 要素から値を選択するたびに、呼び出す非キャンバス UI 内で変更されます。

キャンバス コンポーネント内ではcolour、コンテキストから値を取得し、それを使用してコンポーネントで使用される色を設定します。

キャンバス コンポーネントによって読み取られ、非キャンバス コンポーネントによって設定される色の値を取得したらRect、選択ボックスを使用して色を設定できます。

概要

この投稿は非常に単純なユースケースをカバーしていますが、React Context を使用して多数の値の状態を追跡し、ユーザーがキャンバス外からキャンバス内のオブジェクトを更新できるようにする高度な UI を構築できない理由はありません。

reciprocal.devの一部として作成したUser Journey Mapの例で、共有状態のデモを見つけることができます。これは、この記事で説明したアプローチを使用して、非キャンバス UI とメイン キャンバスの間のアプリの状態を追跡するためです。 .