0

感谢您查看我的问题。

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

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

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

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

门户不裁剪但不是相对的

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

<CardContent>
          <PortalWithState closeOnOutsideClick closeOnEsc>
            {({ openPortal, closePortal, isOpen, portal }) => (
                <React.Fragment>
                  <button onClick={openPortal}>
                    Open Portal
                  </button>
                  {portal(
                    <p style={{top: '0', position: 'absolute', zIndex: 1000, background: 'red', width: '100px', height: '400px'}}>
                      This is a portal
                      <button onClick={closePortal}>Close me!</button>
                    </p>
                  )}
                </React.Fragment>
             )}
            </PortalWithState>
</CardContent>

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

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

4

1 回答 1

0

我的问题实际上是要确保没有明显的预建解决方案我没有找到或理解，但似乎没有。所以我最终推出了自己的解决方案。

基本上：

relativeToRef.current.getBoundingClientRect()

以上可用于获取您希望门户相对定位的列表菜单打开器/按钮的绝对屏幕位置，您可以使用这些坐标定位门户。

起初考虑这个问题时，我认为有必要模仿我已经拥有的菜单保持打开状态并在列表滚动时与列表一起移动的行为。鉴于 React 状态更新总是滞后于滚动帧，不确定如何在 React 中做好这件事。无论如何，我意识到从 UI 的角度来看，并没有真正丢失任何东西，并且通过让菜单/门户在滚动时消失可能会有所收获。

于 2022-02-05T18:10:20.697 回答