处理React + Redux中的多级菜单

时间:2017-11-19 15:04:29

标签: reactjs redux

我正在投影类似Photoshop的应用程序:

[ Sidebar ] [ Sub-Sidebar ] [ Main Application ]

侧边栏中大约有10个位置,点击每一个位置重新加载子侧边栏,但没有其他任何位置(特别是不是主应用程序)。每个副边栏都有不同的,有时是大量的选项,我不知道这里的方法是什么。

我想我想通过Redux推送每次点击,但是如何为每个案例加载Sub-Sidebar呢?

我在考虑在Sidebar的reducer中返回正确的组件,但我不知道它是否是一个好/有效的模式?我总是可以加载所有Sub-sidebars并在jQuery中切换它们,但我不想一次加载它们,因为它们中的一些包含数十个纹理等。

感谢任何提示。

1 个答案:

答案 0 :(得分:1)

您是否考虑过使用react-router

每个Sidebar元素都可以是Link s,它们会在应用程序中加载特定路径。

<Link to="/sub/subA" > SubA </Link>

Sub - SideBar组件可以定义Route,它将根据要呈现的路由更改Sub-Sidebar

<Route path="/sub/subA" component={SubMenuA}/>

可以使用Sub-SideBar创建不同的Link,然后根据需要由MainApplication部分处理。