问题标签 [react-portal]

我正在开发一个使用 React 门户的 React 应用程序。我已经能够使用给定数据在新窗口中加载门户（门户代表表中的数据。）。现在我想在门户中的该表上添加 Jquery DataTable 库，但我无法这样做。我假设我的 Jquery 库和 DataTable 启动功能在门户中不起作用。

注意：我尝试添加一个简单的 onClick，但无法运行它。

请参阅以下代码段以供参考。

在我的父组件中加载带有“餐厅”组件的门户

RankingWindowPortal 组件

餐厅部分

先感谢您 ：）

我正在尝试使用 rxjs（没有 setTimeout()）添加工具提示延迟（300ms强调文本）。我的目标是在 TooltipPopover 组件中包含这个逻辑，稍后将被重用，延迟将作为道具传递（如果需要）。

我不确定如何使用 rxjs 在 TooltipPopover 组件中添加“延迟”逻辑？

Portal.js

TooltipPopover.js

应用程序.js

然后，我在不同的地方渲染 TooltipPopover：

我正在为 React 实践开发一个 Twitch 克隆应用程序，并且我正在为用户想要删除视频流时创建一个模式弹出窗口。基本上他们有一个流列表，他们单击其中一个流上的删除按钮，然后使用ReactDOM.createPortal

这是删除按钮

这是模态的代码

此模式只能在 React-Router Route /streams/:id/delete上查看

我的预期行为是，当我单击深色背景时，我的onClick函数应该返回<Redirect to="/">应该关闭模态窗口的函数，因为它没有在该路由中呈现。

我得到的行为是单击深色背景不会重定向，尽管我也没有收到任何错误。

有关其他上下文，此项目的 GIT 存储库位于此处Glitch Client

到目前为止，我对这个项目的所有部分都有大量的笔记Ncoughlin：标记 Twitch 克隆

我有一个外部库（DataTable），它在 React 之外操作 DOM，幸运的是，每当创建元素（在本例中为列）时，该库都会提供一些回调。

目前我正在使用这个回调来覆盖默认的渲染行为并在元素内部渲染一个 React 组件：

一切都很好，这个 SdrStatus 组件不是父组件的子组件（所有 cons 上下文不共享，...）

我想使用门户将此子组件与父组件连接起来：

但在这种情况下，在 UI 上，结果如下：

有人知道这里可能是哪个问题吗？请考虑从 DOM 角度来看，td 是父组件的容器 div 的子项（对于 createPortal 而言，这可能是意外的）

我正在尝试创建一个 React Portal，它在安装时需要运行特定的行来加载 ActiveReports Designer 组件。

这是我的门户代码：

但是，当新窗口加载时，我收到错误

Error: Cannot find the host element. at Function.<anonymous>

这表明该designer-hostdiv 不存在。我认为加载函数指向主 DOM 而不是新窗口的。

或者，我尝试通过在我的 componentDidMount() 中附加 ActiveReports .js 文件

然后在元素的 onLoad 属性上分配 Designer 实例化。再次没有运气。

是否有一种方法可以在加载门户并指向该 DOM 后运行 JavaScript 代码？

谢谢

这是背景.tsx：

这是 Backdoor.tsx 的 CSS

这是它的样子：

我的应用程序有一个名为Open Modal. 单击此按钮时，将向document.bodyusing附加一个模式createPortal。演示链接

一旦安装了模式（即isOpen === true），我想在每次用户单击页面上的某个位置时将一些文本打印到控制台。

为此，我使用useEffect钩子将点击事件绑定到document对象，如果isOpen === true：

当用户第一次点击“Open Modal”时，isOpen从false变为true，这会导致组件重新渲染。重新渲染完成后，注册上述效果中的点击事件。

问题

第一次单击 'Open Modal' 会document触发 'click 事件（您可以在控制台中看到事件处理程序的输出）。这对我来说没有意义 -当第一次“打开模式”点击传播到它时，点击事件怎么可能已经注册？document

预期行为

第一次点击 'Open Modal' 只会导致document'click 事件被注册，此时事件本身不应触发。

如果我省略createPortal（参见演示的第 38 行），应用程序将按预期工作，即在第一次单击“打开模式”时注册事件，并在页面上的所有后续单击时调用事件处理程序。

如果我将模式安装到应用程序根目录的同级而不是document.body（参见演示的第 39 行），该应用程序也可以按预期工作。所以上面描述的问题只有在createPortal使用 withdocument.body作为容器时才会出现，但我不明白为什么。

这是一个 typescript-next.js 项目。我有这个模态组件：

我将自定义错误传递给 ErrorHandler 组件：

但是，Modal 组件已成功安装在 DOM 上，但屏幕上没有显示任何内容。

编辑 我有背景和模态组件。

我的 React 应用程序包含视频聊天功能（通过 Twilio）。用户转到仪表板，然后单击按钮开始呼叫。这会提示VideoCall组件被实例化和显示。在实例化时，它连接到后端 Twilio 服务以获取访问令牌，然后连接到 Twilio 以创建调用、设置事件处理程序等。

目前我在仪表板的 div 中显示视频窗口，但我希望它们出现在弹出窗口中。我尝试过使用 react-new-window 并且尝试过 React Portals，但我对我在做什么以使其工作知之甚少。

目前我有以下Dashboard组件：

我的VideoCall组件是：

到目前为止，这行得通。用户单击该按钮，视频窗口按预期出现在仪表板的顶部。

现在我想将VideoCall组件拉出到一个单独的窗口中（以便用户在通话时仍然可以看到仪表板。

我尝试了 react-new-window 包，它只涉及VideoCall将NewWindow. 我尝试将它包装在Dashboard组件中：

当这不起作用时，我尝试在VideoCall组件中进行包装：

在这两种情况下，这都会显示带有空callWrapperdiv 的新窗口；但是，一旦到达document.getElementById('myVideoWindow').appendChild(div)它就无法找到 div。被引用的 DOM 似乎是来自仪表板窗口而不是新窗口的 DOM（此外，任何console.log命令都会记录到原始窗口的控制台，而不是新窗口）。

然后我尝试拆开 NewWindow 代码并创建自己的定制版本，但我对它如何工作以使其满足我的需要还不够了解。

那么，有没有办法从其中的组件访问新窗口的 DOM？还是我应该采取不同的方法？

我想让它像https://tailwindui.com/components/application-ui/overlays/modals上的第一个模态一样居中

我在下面的 Modal 上复制了相同的类，但我无法将其垂直居中。类是完全相同的。

是 React Portal 问题吗？

模态的.tsx

Codesandbox → https://codesandbox.io/s/headless-ui-dialog-1gd8e

我想将它垂直和水平居中。我该怎么做？