使用持久抽屉反应路线

Question

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

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

NavButton 的行为应该如下：

• 在大屏幕上：
  • 应该始终是打开MainMenu 的汉堡包图标。
• 在小屏幕上：（除了第一个条件，这个和Gmail手机app上的体验差不多）
  • 如果没有Sidenav，它应该显示一个打开MainMenu的汉堡图标。
  • 如果Sidenav 已关闭，它应该显示一个打开Sidenav 的后退图标。
  • 如果Sidenav 已打开，它应该显示一个打开MainMenu 的汉堡图标。

/admin 和 /public 路由只是示例。还有更多，其中一些有Sidenavs，而另一些则没有。

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

注意：我对 React 还很陌生，当然不会与上面的组件结构结合；这只是为了说明。

Answer 1

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

没错。子组件应始终是展示性（纯/哑）组件。

应用程序不应负责管理其潜在子系统中的哪些有或没有 Sidenav

我不会称它为“负责”。它只是保持应用程序的状态。用户负责，通过点击汉堡按钮。

当中间有 Route 时，props 如何从 App 传递给某个孩子？

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

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