使用持久抽屉的反应路线

Question

假设我有一个带有以下组件和路由的React应用程序（带有React Router 4）：

• App（/）
  • Toolbar - 一个固定的工具栏
    • NavButton - 一个外观和行为取决于当前路线的按钮（见下文）
  • MainMenu - 从侧面弹出以在顶级路线之间导航的临时抽屉
  • Admin（/admin）
    • Sidenav - 一个导航抽屉，在大屏幕上一直打开，可以在小屏幕上切换。点击Sidenav中的项目导航到/admin
    下的不同子路线
    • Content（/admin/<xyz>）
  • Public（/public）
    • Content

NavButton的行为应如下：

• 在大屏幕上：
  • 它应该始终是一个汉堡包图标，可以打开MainMenu。
• 在小屏幕上:(第一个条件除外，这类似于Gmail移动应用中的体验）
  • 如果没有Sidenav，则应显示一个打开MainMenu的汉堡包图标。
  • 如果Sidenav已关闭，则应显示一个打开Sidenav的后退图标。
  • 如果Sidenav已打开，则应显示一个打开MainMenu的汉堡包图标。

/admin和/public路由只是示例。还有更多，其中一些有Sidenav s，有些没有。{/ p>

我的问题是：在这里管理UI状态的React方法是什么，并将所有组件和路由连接在一起？感觉App应该负责跟踪sidenav是否打开，因此它可以将该信息传递给Toolbar和其他人，但它似乎也应该App 't 负责管理哪些潜在的孩子有或没有Sidenav。此外，如果道具之间有App，道具如何从Route传递给某个孩子？

注意：我对React很新，当然没有与上面的组件结构结合;这只是为了说明。

Answer 1

  

感觉App应该负责跟踪sidenav是否打开

真。子组件应始终是表示（纯/哑）组件。

  

应用程序不应该负责管理哪些潜在的孩子有或没有Sidenav

我不会称之为“掌管”。它只是保持应用程序的状态。用户通过单击汉堡包按钮来负责。

  

当道路介于两者之间时道具如何从App传递给某个孩子？

为什么不呢？您可以使用render代替component。例如：

let Parent = (props)=> {
 <Route 
   path="/pizza" 
   render={()=> <Pizza topping={props.topping} />}  />
}