带有持久抽屉的反应路线
React route with persistent drawer
假设我有一个带有以下组件和路由的 React 应用程序（带有 React Router 4）：
App (/)
Toolbar - 一个固定的工具栏
NavButton - 外观和行为取决于当前路由的按钮（见下文）
MainMenu - 从侧面弹出的临时抽屉，用于在 top-level 路线之间导航 Admin (/admin)
Sidenav - 一个在大屏幕上一直打开，在小屏幕上可以切换的导航抽屉。单击 Sidenav 中的项目会导航到 /adminContent (/admin/<xyz>)
Public (/public)
Content
NavButton 的行为应如下所示：
- 在大屏幕上：
- 它应该始终是打开
MainMenu 的汉堡包图标。
- 在小屏幕上：（除了第一种情况，这与 Gmail 移动应用程序上的体验类似）
- 如果没有
Sidenav，它应该显示一个打开 MainMenu 的汉堡包图标。
- 如果
Sidenav 关闭，它应该显示一个打开 Sidenav 的后退图标。
- 如果
Sidenav 打开，它应该显示一个打开 MainMenu 的汉堡包图标。
/admin 和 /public 路线只是示例。还有更多，其中一些有 Sidenav，有些没有。
我的问题是：在此处管理 UI 状态并将所有组件和路由连接在一起的 React 方法是什么？感觉应该是 App 负责跟踪 sidenav 是否打开，所以它可以把那个信息传递给 Toolbar 和其他人，但又好像 App 不应该 负责管理其潜在 child 人中有或没有 Sidenav 的人。另外，当中间有 Route 时，道具如何从 App 传递给某些 child？
注意：我是 React 的新手，当然不熟悉上面的组件结构；这只是为了说明。
It feels like App should be responsible for keeping track of whether the sidenav is open
没错。子组件应始终是展示性 (pure/dumb) 组件。
App shouldn't be in charge of managing which of its potential children have or don't have Sidenav
我不会叫它 "in charge"。它只是保持应用程序的状态。用户负责，点击汉堡包按钮。
how can props get passed down from App to some child when there's a Route in between?
为什么不呢？您可以使用 render 而不是 component。例如：
let Parent = (props)=> {
<Route
path="/pizza"
render={()=> <Pizza topping={props.topping} />} />
}
假设我有一个带有以下组件和路由的 React 应用程序（带有 React Router 4）：
App(/)Toolbar- 一个固定的工具栏NavButton- 外观和行为取决于当前路由的按钮（见下文）
MainMenu- 从侧面弹出的临时抽屉，用于在 top-level 路线之间导航Admin(/admin)Sidenav- 一个在大屏幕上一直打开，在小屏幕上可以切换的导航抽屉。单击Sidenav中的项目会导航到/admin 下的不同 sub-routes
Content(/admin/<xyz>)
Public(/public)Content
NavButton 的行为应如下所示：
- 在大屏幕上：
- 它应该始终是打开
MainMenu的汉堡包图标。
- 它应该始终是打开
- 在小屏幕上：（除了第一种情况，这与 Gmail 移动应用程序上的体验类似）
- 如果没有
Sidenav，它应该显示一个打开MainMenu的汉堡包图标。 - 如果
Sidenav关闭，它应该显示一个打开Sidenav的后退图标。 - 如果
Sidenav打开，它应该显示一个打开MainMenu的汉堡包图标。
- 如果没有
/admin 和 /public 路线只是示例。还有更多，其中一些有 Sidenav，有些没有。
我的问题是：在此处管理 UI 状态并将所有组件和路由连接在一起的 React 方法是什么？感觉应该是 App 负责跟踪 sidenav 是否打开，所以它可以把那个信息传递给 Toolbar 和其他人，但又好像 App 不应该 负责管理其潜在 child 人中有或没有 Sidenav 的人。另外，当中间有 Route 时，道具如何从 App 传递给某些 child？
注意：我是 React 的新手，当然不熟悉上面的组件结构；这只是为了说明。
It feels like App should be responsible for keeping track of whether the sidenav is open
没错。子组件应始终是展示性 (pure/dumb) 组件。
App shouldn't be in charge of managing which of its potential children have or don't have Sidenav
我不会叫它 "in charge"。它只是保持应用程序的状态。用户负责，点击汉堡包按钮。
how can props get passed down from App to some child when there's a Route in between?
为什么不呢？您可以使用 render 而不是 component。例如：
let Parent = (props)=> {
<Route
path="/pizza"
render={()=> <Pizza topping={props.topping} />} />
}