问题标签 [react-portal]

我正在尝试将一个组件中的 DOM 元素移动到一个单独的组件中。基本上，div需要向上移动两个父级。

我有两个组件在起作用：

1. AuthFlow.js
2. 注册.js

我已经研究过 React 门户，但我不确定这是否是可行的方法。

我正在使用带有右键单击操作的ant-design Dropdown组件。

我希望能够一次增加 5 或 10。但是，每当单击它时，它都会忽略 onClick 侦听器的Menu.Item.

Codesandbox 示例：https ://codesandbox.io/s/contextmenu-with-dropdown-antd-n4c5i?file=/index.js

我尝试过使用 ReactDOM.createPortal，但我只是不知道如何在像这样的场景中正确使用它。

我知道我可能不应该使用 createPortal 解决方案，但我需要它的原因不是为了这个简单的示例，而是我希望在 ant-design 表列标题中具有此功能，同时还具有排序支持。

鉴于这样的事情：

我可以有条件地将我的模态对话框直接渲染到正文上（也许将清理留给对话框，但这对于这个问题并不重要）。这可行，但问题是没有可用的上下文（即useContext）。

从 v16 开始。这种情况有一个api createPortal，. 这样可以保留上下文并允许渲染到任意 DOM 节点。但是，如上所示，这在点击处理程序内没有任何影响 - 它旨在从<MyPage/>组件返回，并在其他地方处理实际呈现。

所以我的问题是 - 我可以有条件地将任意组件渲染到指定的 DOM 节点，作为使用createPortal或其他 API 的事件处理程序的一部分吗？

我正在尝试使用 slate-react 制作编辑器。我制作了一个悬停菜单，但 Next.js 渲染存在样式问题。所以我试图createPortal在 Next.js 的默认 id 下使用 React __next。但我遇到了Error: Target container is not a DOM element.错误。

下面是我的代码：

我将 div 存储在根变量中并将其ReactDOM.createPortal作为第二个参数传递给。

我想创建一个应该附加到它的容器组件的 Portal 组件，但不是通过容器的 ID 而是通过它的 ref。换句话说，我不想将 document.getElementById('CONTAINER_ID') 作为第二个参数传递给 ReactDOM.createPortal 函数，而是仅仅依赖 React.forwardRef 传递的容器的 ref。有没有一种简单的方法可以实现这一目标？否则，也许我需要先创建一个“附加”到 ref 的 dom 节点，然后将该节点作为第二个参数传递给 createPortal 函数？我想尽可能避免分配 ID。这是示例代码（我在 TypeScript 中工作）：

我正在尝试创建一个模式，以便在验证并提交表单时，会出现一条感谢消息。该项目设置为 Typescript 应用程序，但我大部分时间都在使用 react.. 需要学习 typescript.. 我已经完成了以下步骤-

1. _document.js 文件添加了一个 id 为“modal-overaly:
2. 在我的联系表单组件中，我导入 Modal 组件并在发送表单后传递状态。
3. 在 Modal 组件中我导入 createPortal- 我创建了一个名为 portalElement = document.getElementById("modal-overlay"); 的变量；
4. 如果 showModal 我返回？createPortal(modalContent, portalElememt) : null;

我收到一个错误，说引用错误：未定义文档。

我不确定出了什么问题。非常感谢任何提示！

我希望一个组件可以在多个组件之间共享，但不会停止反应。我试过这个：

低阶组件，创建一个x组件并渲染它。此外，它会将其分配给ShareCtx. 我面临的问题是，虽然该{x}部分在 的渲染方法内工作正常LowerInHierarchy，但同样不适用于{portalComponent}组件的渲染方法内HigherInHierarchy。

我应该用createPortal这个还是别的什么？

我要解决的是 1）在某个组件中定义的本地状态，2）作为道具传递此本地状态的功能组件，3）此组件要在任何其他地方呈现。

我正在向现有网站添加一些 React 模块。为此，我正在通过 React Portal 安装我的 React 组件。

简而言之，虽然我的组件确实按预期安装，但不会触发动画。例如，他们仍然坚持使用opacityof 0。我希望这些组件opacity 0根据. 1_ 0_1initial animateexit<AnimatePresence>

可以在此处的 CodeSandbox 上找到显示该错误的人为但有效的示例。

CodeSandbox 中的代码如下所示：

索引.html

上下文.js

index.js

模态.js

我正在尝试将react-portal与我的工具提示组件一起使用。没有错误，但它似乎不起作用：

1. 工具提示仍被其父容器部分隐藏overflow:hidden
2. 我没有看到它添加到#root.

这是完整代码的Codesandbox。

我计划将React Portals用于我正在构建的解决方案，并且我试图了解当容器或其内容被删除时孩子会发生什么。

我的代码：

其中 container 是一个 HTML 元素。

那么在以下情况下，孩子会发生什么？

案例 1：容器从 DOM 中移除：

案例2：容器内容被卸载