如何在虚拟化列表中使用 select 下拉列表？

Question

我目前正在开发一个 React 应用程序，其中有一个虚拟化列表 (https://github.com/bvaughn/react-virtualized)。列表中的项目可能包含 select 下拉菜单。

现在的问题： 虚拟化列表隐藏溢出。所以最后一个项目下拉列表不显示，你不能向下滚动查看下拉列表的内容：

=================图片到此结束================

我不知道如何在不更改虚拟化列表代码的情况下解决此问题。有人吗？

Answer 1

react-virtualized 不能在不破坏滚动行为的情况下使用 overflow: visible（这是 react-virtualized 工作方式的关键）。因此，如您所观察到的，下拉菜单之类的东西会被剪掉。

对于想要在反应虚拟化行中放置下拉菜单之类的东西的人，我通常建议使用门户。这允许菜单内容扩展到单行（甚至整个 List）之外而不会被剪裁。

我过去曾为此使用过 tajo/react-portal。