ReactJS 模态组件答案

【问题标题】：ReactJS Modal ComponentReactJS 模态组件
【发布时间】：2015-04-02 20:00:11
【问题描述】：

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

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

FakeRainBrigand 甚至在这篇文章中很好地混合了这个模式：https://stackoverflow.com/a/26789089/586181

这对我来说就像一个黑客。如果您想使用像 jquery-ui 这样的非 React 库，那就太好了，但是如果不需要中断 React，只是为了在 DOM 中的其他地方渲染一个 React 组件，这似乎有点矫枉过正。有没有更“反应”的方式来实现这一目标？

谢谢

【问题讨论】：

“最佳”是非常主观的，正如所写的那样，这似乎比通常更适合 StackOverflow 更适合讨论。它始终只是 JavaScript ...因此您可以根据需要操作 DOM。
@WiredPrairie 我进行了编辑以减少主观性。是的，我可以直接编辑 DOM，或者做其他十几件事。但是有没有一种“反应方式”来做这件事，问题是……

标签： reactjs

【解决方案1】：

我会把这个最好留给 react 文档。如果您必须隐藏需要与父子之外的其他元素甚至可能是祖父母之外的其他元素进行通信的 React 元素，请参阅下面的内容。

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

【讨论】：

【解决方案2】：

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

我的实现使用了标准的 React 渲染周期。您传送/注入/传输的组件不会导致目标上的双重渲染周期 - 一切都是同步发生的。

API 的结构也阻止了在代码中使用魔术字符串来定义源/目标。相反，您需要显式创建和装饰将用作目标（可注入）和源（注入器）的组件。由于这种事情通常被认为是非常神奇的，我认为显式的组件表示（需要直接导入和使用）可能有助于减轻组件注入位置的混淆。

您可以完全使用我的库将 ModalComponent 绑定到您使用 Injectable 助手装饰的根级组件。我计划很快添加此用例的示例。它甚至支持自然道具传递，以及所有各种组件类型，即无状态/类。

【讨论】：