Javascript 在不同层次的两个React组件之间建立链接的好方法是什么？

我是一个比较新的反应者，我正试图弄清楚我应该如何编写一个复杂的应用程序（而不仅仅是一个简单的TODO应用程序）

我基本上有这样一个结构（大大简化）：

，但左侧图标始终不可见

将有许多页面组件（在菜单栏下方可见），其中一些将出于各种原因使用

根据可用的屏幕分辨率，我希望我的应用程序能够响应，并且：


在小屏幕上使用该组件，或
在大屏幕上显示固定的边栏（如打开的抽屉，但不覆盖主要内容）

此屏幕截图更容易理解，可能是：

抽屉和侧边栏的内容将完全相同，因为只有其中一个可见

因此，我想创建一个
组件，可以在任何页面组件的顶层使用：

render() {

  const selectionList = <div>will be visible in the drawer/sidebar</div>;
  const myContent = <div>will be the main content of the page</div>;

  return (
    <DynamicDrawer
      drawerContent={selectionList}
      mainContent={myContent}
    />
  );
}

render（）{
const selectionList=将在抽屉/侧栏中可见；
const myContent=将是页面的主要内容；
返回(
);
}

我在实现
方面没有问题，但是应用程序组件的
需要一些与活动
的连接：


使用抽屉时，
必须显示左侧图标，否则不能显示
当用户单击/轻触该图标时，必须切换


我应该使用像Redux这样的商店来解决这个问题吗？还是手动传递处理程序和状态？我应该完全重新设计组件层次结构吗？
React使DOM操作非常简单，速度惊人。
但是，DOM上的大多数更改应该由数据决定，而不是由您手动操作（即使您有权这样做）。打破这条规则，你的应用程序开始变得越来越复杂，地狱也会随之释放

所以不，您不应该手动传递处理程序和状态，是的，您可能必须重新设计层次结构（流与
菜单栏
，几乎就像它是静态的一样）

我可能无法具体说明您的新层次结构应该是什么。这完全取决于您希望数据如何流动

这就是为什么React用户喜欢像
Flux
和
Redux
这样的库。两者都鼓吹数据应该只朝一个方向流动，所有状态的变化应该只通过一个分派调用发生

由于您对反应还不熟悉，并且已经掌握了一些基本知识，因此我认为是时候看看
Redux
。一旦您理解了它，您就可以清楚地知道在哪里不仅可以放置
菜单栏
，还可以放置您希望添加的任何其他组件

编辑1

由于您喜欢使用顶级组件的状态来操作菜单栏，而不仅仅是css规则，因此
组件应该在顶级组件中，而不是在路由器中（事实上，在路由器中看到
非常奇怪：）

顶级组件的
render（）
可能如下所示：

render() {

  const selectionList = <div>will be visible in the drawer/sidebar</div>;
  const myContent = <div>will be the main content of the page</div>;

  return (
    <div>
      <Menubar />
      {this.props.children}
    </div>
  );
}

render（）{
const selectionList=将在抽屉/侧栏中可见；
const myContent=将是页面的主要内容；
返回(
{this.props.children}
);
}

而您的
保持不变。这样，您可以将回调作为道具传递，并观察
中可能影响侧边栏可见性的更改

不过我得补充一点。如果只有“屏幕分辨率”影响侧栏的可见性，那么将css规则放在适当的位置可能是一种方法。
通过重新阅读，我注意到
可以嵌套，并且每个
级别都可以有自己的组件

这以一种非常优雅的方式解决了我的问题：

<Router>
  <Route path="/" component={AppOuter}>
    <Route path="/page1" component={Page1} />
    <Route path="/page2" component={Page2} />
    <Route path="/page3" component={Page3} />
  </Route>
</Router>

这意味着，在
page1
上，这会导致

<AppOuter>
  <MenuBar />
  <Page1 />
</AppOuter>



这样，我可以将页面组件和应用程序的永久部分（如
菜单栏
）保持在同一级别，即
AppOuter
和
PageX
可以接收相同的道具，并且我可以将回调传递给属于顶级组件（包含路由器）的页面组件

尽管如此，使用这种层次结构可能更好，但使用Redux（或类似工具）来管理状态

…反应太棒了；-）
 是的，实际上，菜单栏是静态的，总是可见的，我应该提到这一点。我还认为使用Redux是个好主意，尽管“pass handlers and state msnurally around”实际上是指React方式，即使用道具和回调。不过，我想知道为什么您建议更改组件层次结构。你能解释一下吗？@UdoG-Oh如果菜单栏是静态的，不参与任何数据操作，也不受益于任何数据操作，那么你当前的层次结构看起来很好。你决定使用Redux是件好事。你会喜欢的：）嗯。。对于“静态”，我的意思是“固定的”，或“始终可见”，而不管路线如何。如问题中所述，它间接取决于“屏幕分辨率”，因为它是左图标（
≡）应仅在
处于抽屉模式（而不是侧栏模式）时可见。因此，在某种程度上，
需要影响
。我相信使用Redux可以做到这一点，但我的层次结构是否仍然设计得很明智？换言之：≡ 当
可见并且决定将其
s
drawerContent`隐藏在物料后面时，
的图标必须可见。当用户点击该按钮时≡ 图标在
内，则
必须将其切换为
s
`子对象。我认为它是

render() {
  return (
    <div> 
      <MenuBar />
      {this.props.children}
    </div>
  );
}

<AppOuter>
  <MenuBar />
  <Page1 />
</AppOuter>