javascript – 为可重用的React组件和浏览器历史记录设计状态

我正在寻找在我的React组件中构建状态的方法,以便我可以一起完成两个目标：(1)在复杂的应用程序中管理浏览器历史记录,以及(2)让各个组件在主应用程序之外的环境中轻松重用.

该应用程序有一个Panel组件,可让用户浏览和阅读我们网站上的内容.在主应用程序中,可以打开多个面板并将它们排列在一起.在主应用程序之外,还有其他页面,我希望能够轻松地放入单个Panel组件中.

到目前为止,此代码已经开发出来,每个Panel都有一个富状态,表示它已加载的内容和其他显示设置.这样可以轻松地放入另一个页面 – 我可以只渲染一个Panel组件,用户可以与它进行交互,它可以自行处理.

然而,对于浏览器历史而言,这变得毛茸茸.有一个App组件可以管理多个Panel以及从历史记录中推送和弹出的状态.为了使其能够全面了解整个应用程序的状态,每个面板在发生更改时都会推送其状态的副本.当从历史记录中弹出状态时,App组件可以从它呈现的每个Panel传递initialState.可以想象,随着更新循环最终循环回到彼此,这会变得混乱且容易出错.

感觉就像我需要采取的方法是集中国家(建议here)并尝试使每个单独的小组无国籍.因为在代码中重写所有对setState的调用是一项重大工作,所以我试图评估这是否是唯一的方法.它也感觉这种方法会使重用应用程序之外的组件变得更加困难.我将失去一种感觉,即Panel是一个独立的组件,我可以在页面上呈现,因为它需要某种外部管理器来处理它的状态以及从内部改变它的所有事件.

你会推荐什么？

解决方法

我做了一个响应和实现react-router的应用程序你可以把URL数据传递到每个面板知道什么状态和加载了什么内容,例如你可以有一个网址,如：
http://yoururl.com/index/user/userID1/item/itemID2/filterDate?= “19/09/2014”

要重复使用面板,您可以创建一个构成分段路径视图的URL：您可以在要渲染的视图上传递要知道的所有内容,然后加载视图.

我的routerDomExample
          
            
                
                
                
                    
                    
                
                
                
                
                    
                    
                    
                    
                
            
          

我建议调查react-router.