設計可重用的React組件和瀏覽器歷史記錄的狀態

Question

我正在尋找在我的React組件中構建狀態的方法，以便我可以一起完成兩個目標：（1）在復雜的應用程序中管理瀏覽器歷史記錄，以及（2）讓各個組件在主應用程序之外的環境中輕松重用。

該應用程序有一個Panel組件，可讓用戶瀏覽和閱讀我們網站上的內容。 在主應用程序中，可以打開多個面板並將它們排列在一起。 在主應用程序之外，還有其他頁面，我希望能夠輕松地放入單個Panel組件中。

到目前為止，此代碼已經開發出來，每個Panel都有一個富狀態，表示它已加載的內容和其他顯示設置。 這樣可以輕松地放入另一個頁面 - 我可以只渲染一個Panel組件，用戶可以與它進行交互，它可以自行處理。

然而，對於瀏覽器歷史而言，這變得毛茸茸。 有一個App組件可以管理多個Panel以及從歷史記錄中推送和彈出的狀態。 為了使其能夠全面了解整個應用程序的狀態，每個面板在發生更改時都會推送其狀態的副本。 當從歷史記錄中彈出狀態時，App組件可以從它呈現的每個Panel傳遞initialState。 可以想象，隨着更新循環最終循環回到彼此，這會變得混亂且容易出錯。

感覺就像我需要采取的方法是集中國家（ 這里的建議）並嘗試使每個單獨的小組無國籍。 因為在代碼中重寫所有對setState的調用是一項重大工作，所以我試圖評估這是否是唯一的方法。 它也感覺這種方法會使重用應用程序之外的組件變得更加困難。 我將失去一種感覺，即Panel是一個獨立的組件，我可以在頁面上呈現，因為它需要某種外部管理器來處理它的狀態以及從內部改變它的所有事件。

你會推薦什么？

Answer 1

我做了一個響應和實現react-router的應用程序你可以把URL數據傳遞給每個面板知道什么狀態和加載了什么內容，例如你可以有一個網址：http： //yoururl.com/index / user / userID1 / item / itemID2 / filterDate？= “19/09/2014”

要重復使用面板，您可以創建一個構成分段路徑視圖的URL：您可以在要渲染的視圖上傳遞要知道的所有內容，然后加載視圖。

我的routerDomExample

我建議調查react-router。