状態管理を使用してアプリケーションを変更し、より汎用性の高いものにしようとしています。基本的に私のアプリは、Tableau ダッシュボードが埋め込まれた React Web アプリであり、必要な項目を指定するバックエンドから JSON を読み取ることで、アプリ内の特定のルート (特定のダッシュボードを含む) を設定する必要があります。
これは 2 つの方法で必要です:
UI プロジェクト切り替えにより、プロジェクト間を切り替えることができます フロントエンド経由でログイン試行から JWT を受信 (成功後) 管理する必要がある唯一の状態は、ナビゲーション バーとそのデータだと思います。これにより、関連するパスがレンダリングされ、プロジェクト/ユーザーのみが関連するダッシュボードを有効にすることができます。
これは私のナビゲーション バーのコードです:
リーリーこれは NavbarData です:
リーリーつまり、基本的に必要なのは、ドロップダウン スイッチャーを接続して NavbarData 内の JSON 構造化データを変更し、これらの各変更を状態として定義することです。非常に単純な状態管理タスクなので、React Context を使用して解決したいのですが、どうすればよいでしょうか?
＃＃＃前もって感謝します！
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
React Context を使用してナビゲーション バーのステータスを制御します:
§ コンテキストとその初期状態を定義するには、NavbarContext.js というファイルを作成します。
リーリー§ NavbarProvider コンポーネントを使用してアプリケーションまたはアプリケーション内のターゲット領域を囲みます。これはメイン ファイル (つまり App.js) で行う必要があります。
リーリー§ コンテキストを使用して状態を操作すると、それに応じてナビゲーション バー コンポーネントを変更できます。
リーリー§ navbar の JSON データを受信するとき (通常はログイン後)、コンテキストで setNavbarData 関数を使用して navbarData の状態を更新できます。
リーリーsetNavbarData を使用して navbarData 状態を更新すると、navbar コンポーネントが再レンダリングされ、最終的に更新されたデータが navbar に表示されるようになります。
React Router には正しいセットアップが必要であり、正しい依存関係をコードにインポートする必要があります。これらの手順が完了したことを確認するためにメモを作成します。