React - 来自嵌套组件

Question

React noobie ...我正在试图找出在React App中处理模态的“正确”方法...即模态容器应该存在的地方以及孩子应该居住的地方以及我是否应该使用状态或用于处理打开/关闭的道具。此外，无论他们住在哪里，如何相对于文档正文打开它们。

我的整体应用结构：

<App>
  <Sidebar />
  <MainConstainer>
    <ChildPage>
      <ChildList>
        <BtnModalTrigger>
          <button onClick={open.modal.relative.to.doc.body}>Open Modal</button>
        </BtnModalTrigger>
      </ChildList>
      <Modal />
    </ChildPage>
  </MainConstainer>
</App>

我隐藏了子页面中的Modal组件，列表中的触发按钮然后“关闭模式”按钮本身就是模态。我不知道在哪里放置我的isOpen和isClosed函数或者如何在组件树上上下传递onClicks。