React JS如何避免深回調

Question

我的問題是「當我想訪問/對子組件數據作出反應時，是否有避免在樹中發送回調的方法」。

我有一個包含一個子組件Person又包含一個子組件TraitCollection又包含一個子組件Trait組件Application。

當Trait改變我想要將數據發送回Application在Application命名PersonList被轉發到另一個孩子。

我現在的解決方案是將回調作爲道具發送給每個孩子。每個回調函數構造並附加最終到達Application的數據，我將其作爲道具傳遞給PersonList。

我可以想象，「增加更多層次」，或者將組件分成更小的部分會使這個回調鏈進一步複雜化。

是否有任何其他方式來做到這一點，或者這是處理從兒童到React父母的傳遞數據的最佳方式？

Answer 1

您處理它的方式是建議的方式和最反應類似。除了你發現的問題之外，這種方法本身沒有任何問題。它看起來像Redux可以幫助你解決這個問題。 Redux可讓您將React應用程序的狀態統一爲使用普通商店和基於動作創建者，動作和縮減器的良好設計模式。

Answer 2

您可以直接使用React Context https://facebook.github.io/react/docs/context.html，但更好的選擇將使用React-Redux，它將允許您避免傳遞迴調，並且您將能夠更改任何組件的狀態（連接到存儲）具有派遣功能。