問題タブ [react-context]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - Reactでナビゲーションバーとサイドバーを動的に更新する最良の方法は何ですか?
反応アプリのレイアウト コンポーネントを作成し、ルートの変更時にサイド バーとナビゲーション バーを動的に更新したいと考えました。
redux を使用できますが、必要がない場合でも、すべての状態とメソッドをいつでも利用できます。
新しい反応コンテキストも見ましたが、redux と同じ問題があります。
反応ルーターを使用すると、新しいサイドバーまたはナビゲーション バーをマウントしているように見えます。
新しい状態とメソッドをレイアウト コンポーネントに動的に提供する方法はありますか?
(状態を別のもの、または複数の新しい状態に置き換えます: リンゴ --> オレンジ)
React ルーターは私の最良の選択肢のように見えますが、新しいルートごとにサイドバーとナビゲーション バーを含めるだけで同じことができます。
リンクを動的に追加することは問題ではありません。新しくマウントされたコンポーネントに影響を与えるボタンを追加することは問題です。ナビゲーション バーとサイド バーは親コンポーネントに存在するため、すべての状態とメソッドを認識する必要があります。
ありがとう、
編集:
例:
- ホーム - 概要 - お問い合わせ
リンクで問題ありません。switchComponet メソッドを使用して、リンク コンポーネントを他のコンポーネントに置き換えるだけです。
停止 - スピードアップ - ヘルプ
これらはすべてボタンです。次に、それらのメソッドと状態を Layout コンポーネントに追加する必要があります。アプリが成長すると、より多くの状態とメソッドを最上位コンポーネントに追加する必要があります。それらすべてを redux に配置できますが、すべての状態とメソッドは常に利用可能です。redux についてはおそらく間違った印象を持っています。多くのリソースを消費するかもしれないと思っていますが、間違っているかもしれません。
reactjs - コンポーネント間の通信に Context を使用することはお勧めできませんか?
コンテキストに関する公式ドキュメント ( https://reactjs.org/docs/context.html ) を読んだ後、その使用は、「グローバル」と見なすことができるいくつかの変数がある状況に制限する必要があると感じています。さまざまなネスト レベル (現在のテーマ、ロケール、現在認証されているユーザーなど) の多くのコンポーネントに送信します。
コンテキストは、現在認証されているユーザー、テーマ、優先言語など、React コンポーネントのツリーの「グローバル」と見なすことができるデータを共有するように設計されています。
と
コンテキストは主に、さまざまなネスト レベルの多くのコンポーネントから一部のデータにアクセスする必要がある場合に使用されます。コンポーネントの再利用が難しくなるため、慎重に適用してください。
コンポーネント ツリー内で互いに離れているコンポーネント間の通信を容易にするために Context を使用したいと考えています。多くのユーザーは Redux を (主な目的ではありませんが) そのために使用しましたが、React で (react-redux パッケージを介して) 使用すると、そのようなアプローチは Context によって内部的に強化されますが、同様に落胆することはありませんでした。
Context が redux + react-redux と比較して (Redux が状態を更新する別の方法を持っているという事実を除いて) 説明されたシナリオで Context を使用しないようにする欠点はありますか? ドキュメントによると、コンポーネントの再利用がより困難になります。それはどのように行われますか?この詐欺はredux + react-reduxデュオにも関連していませんか?