问题标签 [react-portal]

我有应用程序，用户可以在其中接收来自管理员的消息。管理员在管理员面板上的 WYSIWYG 编辑器中创建消息，消息以 html 字符串的形式存储在 DB 中，然后通过危险的 SetInnerHTML 将消息的内容注入到组件中。消息中的 HTML 已被清理，因此只有允许的标签和属性（没有脚本标签，标签上没有事件处理程序方法等）。

一切正常，但现在我们必须向消息编辑器添加“表单”功能。表单在管理员面板上的单独选项卡中创建，然后可以附加到消息中。在消息中它看起来像这样。

带有表单 ID 的空 div。现在，当消息显示在用户的应用程序上时，我应该处理这种 div 并用从 db 获取的预期表单替换它们（表单不存储为 html，它们存储为指定的 json 结构）。

首先，我考虑使用 React Portal，但读到它们应该用于修改外部 HTML 元素而不是 React 应用程序内部的元素，并且在内部使用它们是不好的做法。

有一些“正确”的方法可以实现这样的目标，还是从一开始就是个坏主意？

I have an app under <div id="app"> and a portal root element <div id="portal"> (https://reactjs.org/docs/portals.html).

I would like to toggle between inline and portal while video is playing.

I hope to avoid video from pausing, or at least user will not detect the pause.

Inline:

Portal (css for frame full screen):

Is this possible? How can I achieve it in React?

我正在使用react-new-window在新窗口中加载一个小组件。在那里，它被分阶段导出为使用html2canvas. 我希望从新打开的窗口调用导出函数，以便可以导出其元素，而不是父窗口中的元素。

问题：导出函数takeScreenShot()总是从父窗口调用，在新的子窗口中html2canvas找不到元素，因为它正在查询父窗口。

我试过打电话takeScreenShot()：

1. 子窗口中的按钮onClick道具
2. onOpen道具_<NewWindow/>
3. 从带有或作为参数的[useEffect]钩子（我知道这不应该起作用）NewWindowshowWindowPortal

到目前为止，没有任何效果，并且document.querySelector函数内部始终位于父函数内部。

有什么想法吗？谢谢！

我有一个返回承诺的模态服务，因此消费组件可以等待模态的确认。因为模态被添加到 html 正文中，在添加上下文包装器的应用程序根组件之外，它无法访问上下文。据我了解，从外部访问上下文的唯一方法是使用门户。我已经尝试过了，但它不起作用。

据我所知，如果不使用 render 方法，就无法以编程方式呈现门户，但是当我使用此方法时，结果似乎与根本不使用门户相同。

代码示例：显示一个按钮只是为了举例说明问题

https://codesandbox.io/s/fancy-tree-1e6m1?file=/index.js

我需要从模态组件访问主题上下文提供程序提供的主题，以便继承主题。

在尝试为我的模态弹出窗口设置动画时，我没有使用 CSS 过渡获得动画。模态显示但没有动画。的命名和选择classnames是正确的，但仍然没有动画。我认为使用 React Portal 并将其安装到 DOM 是问题的一部分，但我不确定确切的问题在哪里。

ProjectModal.js

项目列表项.js

ModalTransitions.module.css

Is there a way to pass the window object of one CEF instance into another ?

The original problem is showing popover dialogs from a React application running inside CEF. I'm checking the possibility to render content of the dialog using React portal into a new CEF window.

我有一个门户组件：

我以这种方式渲染它：

但是样式不生效。当我查看 devtools 时，没有样式。就像他们被忽略一样。

当我从 HoveringToolbar 组件中删除 Portal 包装器时，一切正常。问题是什么？

编辑：我发现我可以使用 js 设置样式并且它可以工作，但仍然不明白为什么我不能使用style和class标签来设置样式。

我正在使用jointJS 作为图表库。它使用 svg 元素在图上创建节点。

我想使用 react 来渲染这些节点的内容，并且由于jointJS 允许我配置我希望它使用的 svg 元素，我所要做的就是

• 配置jointJS，让它知道一个节点是一个 <foreignObject>
• 检索该异物，并使用在其中安装一个反应组件createPortal
• 动态调整外来对象的大小，使其适合反应组件。

它工作正常，但我没有足够的经验foreignObject知道是否有任何警告。

任何人都可以提供一些关于他们对这种做法的体验的反馈吗？

我正在开发一个证书管理系统，在完成所有流程后，用户可以打印证书。

我正在努力实现，以便在单击打印按钮时，将打开一个新选项卡，其中包含准备打印的 HTML 证书，以便用户只需 CTRL + P 即可打印证书。

如何在新窗口中呈现我的反应证书组件？这样我只会传递要放入证书中的数据的道具，例如姓名，日期等。像<Certificate name={john} />

我已经尝试实现 npm react-new-window但它不适用于

我已经研究过反应门户，但大多数用例都是针对模态的，这是我的“打印”按钮呈现的地方。

抱歉英语/解释不好。谢谢！

这是我的代码：

当我使用此 DocumentUploadItem 并单击它时，第一次没有任何反应，第二次单击后它会打印“测试”并进一步正常工作。我试图在文档上设置事件处理程序以测试它是否冒泡，但没有再次发生。我该如何解决？