問題タブ [higher-order-components]

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.

0 投票する
1 に答える
2003 参照

javascript - HOC を介してラップされたコンポーネントに React コンテキストを渡す

React の高次コンポーネントを介してコンテキストをラップするコンポーネントに渡す方法はありますか?

親からコンテキストを受け取り、そのコンテキストを利用して基本的な一般化されたアクションを実行し、同じコンテキストにアクセスしてアクションを実行する必要がある子コンポーネントをラップする HOC があります。例:

HOC:

ラップされたコンポーネント:

HOC を渡し{...this.context}ても機能しません。ラップされたコンポーネントが HOC によってラップされている限りthis.context、空です。{}助けてください?コンテキストを小道具として渡す必要のないコンテキストを渡す方法はありますか??

0 投票する
1 に答える
1048 参照

reactjs - 1 つの React コンポーネント。2 つの HOC。setState で小道具を正しく更新するにはどうすればよいですか?

標準の構成関数と 'div' コンポーネントが与えられた場合、次のような 2 つの HOC をどのように記述しますか?

  • 「div」要素は 20 ピクセルの緑色のボックスとして始まり、クリックすると 50 ピクセルの青色のボックスになります。
  • a: 状態を props とマージすること、および b: 状態変更をトリガーすることの懸念は、別々の HOC によって処理されます。
  • updater HOC は状態を props にマップし、デフォルト状態を設定します
  • ディスパッチャ HOC は、クリック時に新しい状態を取得する関数を受け入れます

以下の例は、緑色のボックスを取得するために機能し、ハンドラーを正しく起動します。更新は、Dispatcher HOC の状態でのみ発生します。アップデータ HOC の状態は変更されず、その props も変更されません。

私は何が起こっているのかを理解することに非常に興味があります。Compose で 2 つの HOC の順序を反転すると、ハンドラーが設定されません。それらは両方とも にマージされるため{...this.props}、それは私には意味がありません。複数の HOC が小道具と状態をマージする方法について、私が理解できないことがあると思います。