WindowScroller + AutoSizer + List 没有按预期工作

Question

我试图在我的 Web 应用程序中使用 WindowScroller + AutoSizer + List 的组合。只有 AutoSizer + List 时，虚拟化效果很好。但是，当我将它放在 WindowScroller 中时，行列表不再正确显示。

这是应用 WindowScroller 时的外观。 list result

我已经在这里和文档上搜索了可用的解决方案。发现此处发布了类似的问题，但提供的答案已应用于我的代码。现在，我无法弄清楚究竟是什么阻碍了行的显示。

return (
      <React.Fragment>
        <WindowScroller>
          {({height, isScrolling, onChildScroll, scrollTop}) => (
            <AutoSizer disableHeight>
              {({width}) => (
                <List
                  autoHeight
                  height={height}
                  isScrolling={isScrolling}
                  onScroll={onChildScroll}
                  rowCount={rows.length}
                  rowHeight={30}
                  rowRenderer={({ index, style }) => <div style={style}>Row {index}</div>}
                  scrollTop={scrollTop}
                  width={width}
                >
                </List>
              )}
            </AutoSizer>
          )}
        </WindowScroller>
      </React.Fragment>
    );

Answer 1

这似乎是一个实施问题。我用于 WindowScroller 参考的容器元素的溢出样式设置不正确。