问题标签 [react-portal]

我有一个简单的 React.js 应用程序，它试图通过回调在 Portal 中呈现内容，有人知道为什么它没有呈现任何东西吗？

可运行代码沙箱

我使用 popper.js 实现了一个 Popper 组件，并使用 React 的 Portal 来呈现 popper 元素。

现在我想预览我的 popper 组件，但它无法在 storybook.js 上创建门户

这是我的方法。

.storybook/preview.js

门户网站.tsx

捕获错误消息

有没有办法在故事书中使用反应门户显示组件？如果没有，除了在反应项目上进行测试之外，还有其他方法可以预览它吗？

感谢您查看我的问题。

react virtualized 的@bvaughn 创建者对这个问题的回答表明，您可以使用门户在虚拟化列表中创建一个下拉列表，该列表可以溢出其行而不会被剪裁。

这是一个沙箱，我尝试在卡内添加一个门户。而不是使用@bvaughn 的示例（他在其中混淆地定义和引用但没有呈现应该打开门户的按钮（我可能在这里遗漏了一些东西！？））我使用了来自tajo/react-portal的示例自述文件。我还尝试了材料 ui 门户和 ReactDOM 门户，结果相似。

如果门户内的元素没有类似的东西position: absolute，top: 0那么它根本不会出现。但是如果我们必须给出最高值，我们怎么知道要给出什么最高值，所以它是我们想要它相对于它打开的行/按钮的位置......此外，如果我们使用绝对定位，如何让它滚动时位置更新？听起来可行，但有相当多的样板。

在这里，您可以在沙箱中看到门户没有被相邻行剪裁，这是所需的。但它的位置与打开它的按钮无关：

这是 SimpleCard.js 沙箱中的相关代码

我探索了将行传递到 Portalnode中（我希望它可能正好匹配它的位置），但这使得在指定节点内的渲染违背了目的/没有解决裁剪问题。

非常感谢您提供的任何帮助、见解或经验！

我创建了一个门户组件，它在新窗口中打开一个子组件。我可以访问子组件内部的 Redux 状态，但是当 Redux 状态发生变化时，子组件不会重新渲染，并且似乎丢失了对我调用门户组件的父节点的引用。

弹出窗口.jsx

父组件.jsx

ChildComponent.jsx

父组件按预期重新渲染，但子组件丢失引用并且不重新渲染。

我正在处理一个遗留项目，并且模式是用 React 门户包装的。该团队正在使用功能组件和使用挂钩来更新此代码。有什么方法可以全局应用更改，以便这些模式将直接在指定的节点级别呈现。我已经为这样的一种模式添加了门户。

应用程序中使用了 n 个模态。有没有更简单的方法来做到这一点？我可以编写一个包装器并用如下所示的方式包装模态，但这也需要适用于所有地方

有人可以帮我解决这个问题。