WindowScroller + AutoSizer +列表无法按预期工作

时间:2019-03-22 11:15:16

标签: react-virtualized

我试图在我的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>
    );

1 个答案:

答案 0 :(得分:0)

这似乎是一个实现问题。我用于WindowScroller引用的容器元素的溢出样式未正确设置。