问题标签 [react-portal]

我正在尝试安装一个 React Portal，其节点是当前渲染组件的成员。按照下面的代码所示，我必须通过设置一个componentDidMount对我来说似乎是反模式的状态来强制重新渲染它。

我们如何在第一次渲染中实现它？

我试图用门户打开一个新标签，问题是该标签不显示我想要获得上一个的内容，我关注这篇文章并且标签完美打开，但不显示内容，看起来像这样：

这是我的反应门户代码：

这是我打开新标签的代码：

希望大家能帮帮我，谢谢！

我有一个外部组件（传单地图）。这个组件有很多孩子。应用程序根据状态、路线等在地图上绘制不同的东西。使用 Leaflet（或只是 Map）组件，如 Paths、Markers 等，需要我直接在地图内渲染它们，因此上下文可用（Marker 调用 Map安装上的实例等）。

但是，这变成了不可维护的代码，因为我的地图很大，有很多条件渲染的子节点（如果路由 A 然后渲染组件 X 和 Y）。

我想实现一种在与其域相关的适当位置呈现孩子的方法（地图只是我注入的一个容器）。但它们需要上下文。我试图用 Portals 来解决这个问题，但它不起作用，因为 React在上下文之外渲染子项，而只是在里面渲染 DOM 项目。

所以我需要这样的东西：门户组件，它一直安装在 Map 内部，并以某种方式获取它可以访问的所有上下文，并以某种方式将其注入到投影组件中。

当然，它不一定是react portal，但我希望 API 看起来像这样：

它将构造一棵像这样的树：

如何做到这一点？

我考虑了自己的上下文，但我无法将 React 组件序列化为上下文值，对吧？

我正在写一个扑克牌游戏。我想将一张卡片从 Handfan 动画到 cardTable。一旦卡片离开粉丝视图，它就会消失。我怎样才能将它平滑地动画到显示的中间，在 DOM 中会更高吗？

我虽然也许它适用于 react-native-portal？

这是卡片：

卡片应该刚刚从手扇容器中移出到主容器中而不会消失。

我正在开发一个带有 WordPress 配套网站的网络应用程序。让我们假设域如下：

• app.site.com
• blog.site.com

我想做的是让我的 webpack 4 配置输出，bundle.js但也生成类似的东西header.js，包括单个<Header />组件（不是完整的应用程序）。

然后我会添加一个脚本标签来blog.site.com喜欢这样：

并期望它将应用程序 <Header />安装在博客的 #dom-element

如何做到这一点？

本质上，我在反应功能组件中有以下内容：

我正在使用带有渲染子范式的多个过滤器来获取最终数据。但是出于（诚然令人沮丧的）样式原因，我想在过滤器位置之外的 div 中呈现最终数据（在这种情况下，在“过滤”div 内）。我怎样才能做到这一点？我的方法错了吗？'带有渲染孩子的过滤器'是错误的方法吗？

我努力了：

使用 createRef() 反应门户，本质上问题最终是当调用“finalData”函数时 ref 还不可用。

编辑：

过滤器组件本身非常复杂，但我可以举几个例子。我过滤的数据是一个具有 12 个属性的简单对象。其中一个过滤器被实现为一系列复选框，确定我想要显示的数据的哪些属性（由于字段的数量，必须作为单独的组件）。数据的一个属性是价格，另一个过滤器是价格范围“拨号器”，它指定要显示的价格范围（也就是排除范围外的数据点）。

我正在测试一个简单的 Modal 组件，它是 reactstrap 组件的包装器。我正在使用@testing-library/react。它在浏览器中工作正常，但在测试过程中，我发现即使卸载后模态永久存在于 DOM 中。

上述断言效果很好。所以我们可以保证这个函数已经被调用并且modal状态已经从真变为假。

我签入了我的模态组件，这是正确的。所以不应该显示模态（它在浏览器中工作）。

我认为 DOM 中不应该存在模态，所以在这个例子中 document.body.innerHTML 应该只有<div><div id="app"></div></div>

我正在创建一个Logger服务来跟踪我的应用程序中的事件。为了使Logger服务通用，我使用 React 的 Portal 来捕获在我的应用程序中触发的事件。我的应用程序的基本思想是：

这对我的用例很有效，直到我iFrame在我的应用程序中使用了。

考虑一个呈现 iFrame 的非常简单的组件：

Frame现在，当我在没有门户包裹的情况下在上面渲染这个组件时，iframe.contentDocument日志符合预期。

但是当我渲染Frame包装在 Portal 中的组件时，iFrame.contentDocument值为null。

这是一个代码框，其中有一个描述我的问题的应用程序。有人在使用门户网站和 iFrame 时遇到过这个问题吗？我在这里遗漏了一些明显的东西吗？

我在我的 reactjs 应用程序中使用 react-portal。我创建了两个根元素，一个用于渲染 react 应用程序，一个用于 react-portal：

我还有一个组件 MyComponent，它使用 react-portal 将内容呈现给 react-portal-root-element。内容由具有 id 的 div 元素（我们称之为 container-div）包装。

我的组件：

MyComponent 的父级：

当 MyComponent 第一次渲染其内容时，div 元素将被渲染为 react-portal-root-element 的子元素。

现在，如果我使用 setState 在 MyComponentParent 中设置新状态，它将导致重新渲染 MyComponent 并且 MyComponent 将再次渲染 div。但这一次 MyComponent 的 div 没有渲染为 react-portal-root-element 的子元素，而是渲染为 body 元素的子元素。

我不明白为什么会这样。我无法解决这个问题。我想要的是 MyComponent 的内容总是被渲染到 react-portal-root-element 中。

谁能解释这种行为？

提前致谢。

因此，Portals 解决的一个有趣且令人惊奇的属性是即使您的组件需要在其他地方呈现，也可以保留 Provider 的 Context。如果您使用 ContextProvider 包装组件子树，则在该子树中呈现的任何组件都可以访问上下文值。

反过来，如果你在子树之外渲染了一些东西，它就无法访问那个上下文。React Portals 解决了这个问题，所以如果你想在子树之外渲染一些东西，你可以在同一个子树中进行。我认为React 文档稍微涉及到了这一点：

无论孩子是否是门户，上下文等功能的工作方式完全相同，因为门户仍然存在于 React 树中，无论在 DOM 树中的位置如何。

我想我并没有概念化这实际上是如何工作的。一个 React Portal 如何可以访问上下文而不需要在同一个子树中呈现？听起来好像在幕后，Portal 是“React Tree”的一部分？所以一定有什么花哨的“传信息，然后渲染门户逻辑”？要清楚我的问题

门户在保留对上下文值的访问方面究竟是如何工作的？