ReactJS模态组件

如何创建在组件/DOM层次结构上达到多个级别的ReactJS组件

一个很好的例子是模态。我想在我的应用程序中从嵌套的子级开始触发和控制模式，但模式要求DOM更高，很可能一直作为文档体的子级

我正在考虑一种“门户”模式，如下所述：

FakeRainBrigand甚至在这篇文章中用混合的方式很好地包装了这个图案：

这对我来说像是一种折磨。如果您想使用像jqueryui这样的非react库，那就太好了，但是不需要中断react，只在DOM中的其他地方呈现react组件似乎太过分了。有没有更“反应”的方式来实现这一点

---

谢谢

我将把这个最好的留给react文档。如果您必须拥有需要与其父子甚至祖父母以外的其他元素进行通信的元素，请参见下面的内容

用于在两个没有 父子关系，您可以设置自己的全局事件 系统。在componentDidMount（）中订阅事件，在中取消订阅 componentWillUnmount（），并在收到事件时调用setState（）

---

我已经编写了一个库来帮助解决这个问题。我避免了门户策略所使用的DOM插入攻击，而是利用基于上下文的注册表将组件从源传递到目标

我的实现使用标准的React渲染周期。传送/注入/传输的组件不会在目标上造成双渲染周期-所有事情都是同步发生的

API的结构也不鼓励在代码中使用魔术字符串来定义源/目标。相反，您需要显式地创建和修饰将用作目标（可注入）和源（注入）的组件。由于这类事情通常被认为是非常神奇的，我认为显式组件表示（需要直接导入和使用）可能有助于缓解组件注入位置的混乱

您可以完全使用my library将ModalComponent绑定到根级别的组件，该组件由可注入辅助程序装饰。我计划很快添加这个用例的一个示例。它甚至支持自然道具传递，以及所有各种组件类型，即无状态/类

---

有关更多信息，请参阅。

最佳”一词非常主观，如前所述，它似乎比通常的StackOverflow更适合讨论。它总是只是JavaScript。。。因此，您可以根据需要操纵DOM。@WiredPairie我编辑的目的是为了减少主观。是的，我可以直接编辑DOM，或者做很多其他的事情。但问题是，是否有一种“反应方式”可以做到这一点……我在文档中遗漏了这一点。谢谢当他们的核心原则之一是模块化时，他们会推荐一个全球系统，这似乎很奇怪。是的，我同意你的看法。不过，我想在脑海中总结出一个替代方案，但我想不出什么。看起来很棒。我试试看，没问题。如果你被卡住了，大声喊。欢迎反馈。