问题标签 [react-portal]

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

有问题Portal，应该加载一个按钮openByClickOn（如下所示），但没有出现。的使用是否有任何重大变化openByClickOn？

预期结果：显示可以单击以启动对话框的 div 按钮。

我正在尝试打开一个 React Portal，但我遇到了一些问题：

这是打开按钮所在的位置：

当我单击按钮时，确实会打开一个窗口，但它是空白的，并且只显示标题：“A react portal window”

并且只包含一个空的 div：div="window-container">

下面是包含 Portal 的函数：

这是 Window.js 的代码：

}

正如我所说，当我单击按钮时，窗口确实打开了，但它是空的。

此外，当我单击按钮时，父页面的最底部会显示 的内容：

这是我的 index.js：

但这就是我希望在 Portal 窗口中的样子。

所以我不太确定为什么会这样。

我能做些什么来解决这个问题吗？

谢谢！

我已经阅读了很多关于 Portal 的文章，并决定制作一个。

我有一个显示表格的简单反应页面。

因此，我制作了一个按钮，单击该按钮会模糊表格并打开门户。

它“有效”，但由于某种原因，表格不像我在阅读的文章中看到的那样居中。

它只出现在页面底部的模糊表格下方。

这是我的门户：

这是我的表函数：

这是我的主要 index.js：

如何使门户显示在屏幕中间而不是底部？

我需要使用其他组件或库吗？

谢谢！

我想遍历一堆自定义元素并赋予它们父子关系。所以 arr[0] 将是 arr[1] 的子级，而 arr[1] 将是 arr[2] 的子级...

以下方法将<WrapperDraggable/>元素添加到 box 数组中。

我曾想过使用门户将 box[0] 移植到 box[1] 的 id 等等。所以对于长度为 2 的框，我想制作一个 DOM 结构，例如，

但是，当我尝试使用反应门户呈现一个 div 并将其附加到另一个 id 为“portal”的 div 时，

为简单起见，假设 box 数组已经是相反的顺序。

我没有任何附加到最外层的门户 div。控制台也没有给我任何错误消息。

难道我做错了什么？如果是这样，我怎样才能在我的代码中实现类似的行为？

提前致谢。

tl;dr问题演示

我正在尝试通过 React 16 将Ace Editor集成到 iframe 中。我正在使用react-ace组件库，但如果我也以本机方式实现该编辑器，则会存在此问题。

尽管当我将编辑器包装在react-frame-component中时一切正常，但我无法选择使编辑器无法使用的突出显示文本。我怀疑这可能与react-frame-component使用 Portals 实现的事实有关，但我不确定到底是什么问题。

我在这里复制了这个问题。如果我使用<iframe src />来自另一个域的常规加载组件，我认为不存在此问题。

我目前通过使用 ref 捕获我的组件的根元素并检查点击目标是否是来确定用户是否点击了子元素root.contains(target)。

但是，一些子组件使用 React 门户在 DOM 中组件的根元素之外呈现其内容，即使它们仍然是 React 层次结构中的后代。我知道这个组件层次结构必须保存在某个地方。我是否可以访问它，并简单地确定一个元素是否是另一个元素的“React child”？

我只想知道是否可以将类组件转换为关于以下上下文的功能组件。我不明白/不知道的主要事情：

在 RCC 下面的上下文中，有一个静态方法 create() 和一个未绑定方法show()，我如何在 RFC 中做同样的事情？我可以像调用普通函数一样在任何其他组件中调用 show 函数。例如在一个fetch(url).then(data=>data.payload).catch(err=>settingsService.show())

文件：

SettingsDialog\Settings.jsx,
SettingsDialog\settingsService.jsx

Settings.jsx 代码：

settingsService.jsx 代码：

每当我调用 settingsService.show() 时，组件就会弹出。我想知道是否可以对功能组件做同样的事情。

我有简单的反应门户组件。首先，我在类组件中编写了这个，一切都很好。但我决定将其重写为功能组件。在此门户仅在 div#portal 内部生成 div 而在内部没有子级之后。我不知道哪里出错了。

反应门户上的文档：https ://reactjs.org/docs/portals.html

就像标题所问的那样，我不确定为什么门户是一个状态。我在询问有关渲染和重新渲染的技术细节，或者是否还有其他一些潜在原因。

为什么要处于这样的状态：

而不仅仅是一个常规变量，像这样：

编辑：

当我将容器放入其中useState()时，它将更新并重新渲染内容/子项，而不会受到任何干扰。当容器处于状态之外时，更新将是不稳定的。

我有一个带有按钮的父组件，单击时会在 React.CreatePortal 控件中打开一个新组件。

在那个 CreatePortal 组件上，我有一个这样的按钮：

但是“跳转”功能在父控件上。

在门户中，它无法识别。

有没有办法从门户中触发父级的“跳转”？

谢谢！