ナビゲーションバーのステータス管理

Question

状態管理を使用してアプリケーションを変更し、より汎用性の高いものにしようとしています。基本的に私のアプリは、Tableau ダッシュボードが埋め込まれた React Web アプリであり、必要な項目を指定するバックエンドから JSON を読み取ることで、アプリ内の特定のルート (特定のダッシュボードを含む) を設定する必要があります。

これは 2 つの方法で必要です:

UI プロジェクト切り替えにより、プロジェクト間を切り替えることができます フロントエンド経由でログイン試行から JWT を受信 (成功後) 管理する必要がある唯一の状態は、ナビゲーション バーとそのデータだと思います。これにより、関連するパスがレンダリングされ、プロジェクト/ユーザーのみが関連するダッシュボードを有効にすることができます。

これは私のナビゲーション バーのコードです:

リーリー

これは NavbarData です:

リーリー

つまり、基本的に必要なのは、ドロップダウン スイッチャーを接続して NavbarData 内の JSON 構造化データを変更し、これらの各変更を状態として定義することです。非常に単純な状態管理タスクなので、React Context を使用して解決したいのですが、どうすればよいでしょうか?

＃＃＃前もって感謝します！

Answer 1

React Context を使用してナビゲーション バーのステータスを制御します:

§ コンテキストとその初期状態を定義するには、NavbarContext.js というファイルを作成します。

リーリー

§ NavbarProvider コンポーネントを使用してアプリケーションまたはアプリケーション内のターゲット領域を囲みます。これはメイン ファイル (つまり App.js) で行う必要があります。

リーリー

§ コンテキストを使用して状態を操作すると、それに応じてナビゲーション バー コンポーネントを変更できます。

リーリー

§ navbar の JSON データを受信するとき (通常はログイン後)、コンテキストで setNavbarData 関数を使用して navbarData の状態を更新できます。

リーリー

setNavbarData を使用して navbarData 状態を更新すると、navbar コンポーネントが再レンダリングされ、最終的に更新されたデータが navbar に表示されるようになります。

React Router には正しいセットアップが必要であり、正しい依存関係をコードにインポートする必要があります。これらの手順が完了したことを確認するためにメモを作成します。