我在项目中使用Autocomplete component from Material-UI。由于我有很多渲染选项，因此虚拟化将非常有益。因此，我从文档中的react-window开始the virtualized example。一切工作都很好，但是该项目已经依赖于react-virtualized，我想避免添加一个新的解决类似问题的项目。因此，基于react-window示例，我尝试使用List中的react-virtualized重新实现它。
代码示例
问题
如上面的沙箱所示，这是一种的工作方式。 不起作用是键盘导航。您可以使用键盘进行导航，但是当您在可见元素之外导航时，Listbox不会滚动到突出显示的值。
我尝试过的事情：
onKeyDown组件覆盖Autocomplete。但是，这完全覆盖了keydown功能，需要我重新实现它。onKeyUp保留onKeyDown功能并找到具有data-focus属性的元素，然后在scrollToIndex组件上使用List。在某些情况下可以使用此功能，但是如果用户按住键一段时间，并最终到达过扫描渲染项目之外的索引，则会中断。有人可以使用react-virtualized虚拟化Material-UI自动选择组件中的选项吗？我应该使用List以外的其他东西吗？
我最后的选择是使用useAutocomplete钩子并重新实现渲染逻辑，但是由于我只是在虚拟化之后才想避免这种情况。
答案 0 :(得分：0)
多亏了an issue I opened about this on the Material-UI repo中的回答，我才设法使它开始工作。
要使滚动功能正常工作，您需要确保滚动元素具有“列表框”角色。
这是演示工作版本的代码的更新示例： https://codesandbox.io/s/adoring-saha-n9cr1
唯一的变化是从ListboxComponent道具中提取role属性，并将其分配给List组件。