如何创建一个到达组件/ DOM层次结构的多个级别的ReactJS组件？
这是一个很好的例子，一个莫代尔。我想在我的应用程序中从子嵌套的方式触发和控制模态，但是Modal要求DOM要高得多，最有可能一直作为文档主体的子项。
我正在考虑一个＆＃34;门户网站＆＃34;模式，如下所述：https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/05-wrapping-dom-libs.md#portals
FakeRainBrigand甚至在这篇文章的混音中很好地包装了模式：https://stackoverflow.com/a/26789089/586181
这对我来说就像是一个黑客。如果你想使用像jquery-ui这样的非反应库，那就太棒了，但是如果没有那么需要在DOM中的其他地方渲染一个反应组件就好像是有点过分了。还有更多＆＃34; React＆＃34;实现这个目标的方式？
由于
答案 0 :(得分：2)
我将最好地留在反应文档中。如果您必须埋藏React元素，这些元素需要与其父子项之外的其他元素进行通信，或者甚至可能是祖父母，而不是看下面的内容。
用于两个没有组件的组件之间的通信 亲子关系，您可以设置自己的全局事件 系统。订阅componentDidMount（）中的事件，取消订阅 componentWillUnmount（），并在收到事件时调用setState（）。
https://facebook.github.io/react/tips/communicate-between-components.html
答案 1 :(得分：0)
我写了一个图书馆来帮助解决这个问题。我避免使用Portal策略所使用的DOM插入黑客，而是利用基于上下文的注册表将组件从源传递到目标。
我的实现使用标准的React渲染周期。传送/注入/传输的组件不会在目标上产生双重渲染周期 - 一切都是同步发生的。
API的结构也可以阻止在代码中使用魔术字符串来定义源/目标。相反，您需要显式创建和装饰将用作目标（可注入）和源（注入器）的组件。由于这类事情通常被认为是非常神奇的，我认为明确的组件表示（需要直接导入和使用）可能有助于缓解对注入组件的位置的混淆。
您可以完全使用我的库将ModalComponent绑定到使用Injectable帮助程序装饰的根级别组件。我计划很快添加一个这个用例的例子。它甚至支持自然道具传递，以及所有各种组件类型，即无状态/类。