问题标签 [react-portal]

我在主反应应用程序之外有一个 Blaze 模板应用程序，它包含一个容器，用于在其中呈现 React 门户。在渲染 Blaze 模板时，我们加载数据并将自定义事件发送到 React 应用程序内的事件侦听器，然后渲染门户。

这在 Chrome 中完美运行，但在 Internet Explorer 11 中，门户和模板的渲染和去渲染都慢了很多，并且我们遇到了竞争条件？

在 Blaze 模板的第二次渲染中，React 经历了它的生命周期并尝试卸载前一个门户容器的所有子节点，但是 - 它们不存在，因为我们已经完全删除了那个 DOM 节点（使用 .html('') )，并且我们在 ReactDOM 中遇到了一个错误，即找不到子节点。

我试图通过在现有代码删除 DOM 容器之前发送自定义事件来删除卸载门户。

现在的问题是 unmountComponentAtNode 似乎不适用于我的门户（这是一个经典组件） - 即使在传递直接父容器时也是如此。我认为这可能是因为事件不能保证立即触发，因此它可能仅在 .html('') 调用之后才寻找容器，但这不是问题，在之后放置删除门户事件之后创建门户事件（这两个调用之间不删除 html）。

任何有关我如何在其父容器被 Blaze 替换之前优雅地卸载和渲染门户的信息都将非常有帮助！

提前致谢。

我希望至少能在某个时候成功删除门户，但没有。我无法删除 html.('') 调用，因为这是当前模板引擎替换模板的方式。

我有一个呈现图像的组件，当用户单击它时，我希望它通过门户呈现，而不必重新加载当前正在发生的图像，这是一个简单的示例：

当状态切换到 inportal = true 时，图像本身会重新加载。

我希望它从门户切换到渲染而不会发生这种情况。

我有一个react-bnb-gallery带有单个默认导出组件的包，名为ReactBnbGallery. 它通过门户显示图库并且效果很好，但我的目标是将该图库内联在 html 中并嵌套在组件树中。

目前我有什么：

我想要这个：

通过这种方式，我想省略门户并将画廊放在我的布局中。有什么建议么？？？

我考虑过一些 HOC，<ReactBnbGallery> 或者 Portals 有一些 api 或其他切换器来简单地关闭

提前谢谢！

我确实想在内存中（而不是在 DOM 中）创建一个 React 组件树，它具有与 React Portal 相同的行为，也就是说，它应该使用父组件树中的上下文。

那么是否可以创建类似 Portal 的东西，但不是在 DOM 节点上渲染，而是在内存中（DOM 外部）“渲染”它？

请注意，我需要的是树中某些组件的组件生命周期，而视觉部分将被隐藏，但在我的情况下，如果我将组件树放在隐藏的 div 中的 DOM 中，则性能不佳，然后我想测试不同的方法。

我在我的应用程序中创建了一个反应门户来处理 Modal 的使用。门户目标在我的 React 根 div 之外，作为我的根元素的兄弟。

所以我的门户内容呈现在反应应用程序之外并且它工作正常。这是我的反应门户代码

每当传递孩子并挂载模态框时，都会毫不拖延地绘制沉重的 DOM。但是相同的标记需要时间，甚至会使浏览器选项卡崩溃。我在处理繁重的 DOM 操作时哪里出错了？或者有什么async方法可以处理不会影响整体性能的繁重 DOM 操作？

我在我的 React 应用程序中使用 Next JS，在门户中创建模式时遇到问题，它会抛出错误“目标容器不是 DOM 元素。” ，这是我的代码。

基本场景是这样的：我有一个width: 100%在样式表中定义的组件。因此它应该保留其父组件的宽度。我想计算我的组件的宽度并将其应用于我的子组件，因为我正在通过渲染它createPortal并且我希望它们具有相同的宽度。这在浏览器中有效。但是，在我的测试中，我发现它window.getComputedStyle(component)没有返回从样式表应用的任何样式。

正如建议的那样，我可以模拟 javascript 窗口，但这实际上与我希望做的相反，我认为。我想验证浏览器中存在的行为，它window.getComputedStyle()返回所有应用的样式，而不仅仅是内联样式。

我已经将一个简单的示例放入代码盒中：https ://codesandbox.io/s/goofy-wilson-6v4dp

也在这里：

任何帮助表示赞赏。

这是我的问题的代码框的链接。关联

目前，我有这个设置。Add slot 在 ckeditor 组件内添加一张卡片。您可以创建多个插槽。递增/递减计数器递增/递减 ckeditor 外部的计数器。但是，我希望增量/减量也反映在插槽内。由于无法找到正确的方法来执行此操作，Portal 无法工作，因为它们在同一个 DOM 中呈现。ReactDOM.render 没有办法将上下文从元素的父组件传递到插入的组件。有谁知道解决这个问题的方法？

我从使用“dangerouslySetInnerHTML”在页面上呈现的 API 获得了一些 HTML 字符串响应。现在这个 HTML 有一些空的 div 标签和一个类 "js-lead-in-content" 。

我想在这些 div 中显示一个自定义组件。为此，我正在使用 react 门户，并且能够在这些空 div 中呈现我的自定义组件。但是我面临一个问题，即每当父组件更新由“dangerouslySetInnerHTML”设置的 HTML 字符串时。自定义组件不会添加到空 div 中。

我网站上的页面有几个标签，每个标签都有一些标题和描述。Whenever the tab changes the new data is sent to the above component and it renders it. 但仅对于加载的第一个选项卡，我才能看到其余选项卡的门户没有任何反应。

此外，如果我记录“document.getElementsByClassName('js-lead-in-content')[0]”，它总是会记录活动选项卡的新 DOM 节点。

可能出了什么问题？

react-portal由于最近升级React到 16.8.6 ，一直在尝试从 v2 迁移到 v4。

卡在 Portal 上，即使isOpen=true. 发现onOpen没有开火。关于如何更改代码的任何建议？

预期结果：弹出一个确认对话框。

在浏览器中，已经可以通过修改 css 看到对话框存在。