Javascript React虚拟化：启用“自动高度”时，表行被切断

我目前正在尝试实现React虚拟化以替换一个laggy表，但遇到了一个问题。我正在使用React Virtualized中的

WindowScroller

，

AutoSizer

，

表

，和

列

在我的400行表中，大约有30行在停止显示之前出现（就像那些没有呈现的DOM元素一样）。但是，该表的高度似乎是正确的。以下是有助于形象化的图片：

据我所知，罪魁祸首是

元素上的

autoHeight

（或与之相关）。当我删除它时，我可以滚动表中的所有行元素。但是，这破坏了所需的能够滚动页面而不是表格的功能

到目前为止我已经测试过的东西：

• 我突然想到问题可能出在

  WindowScroller

  上的

  scroll元素上，因为我的表的容器元素已溢出：scroll；高度：100vh

  。当我尝试将

  scrollElement

  属性设置为此元素时，我的所有行都不会呈现。出于测试目的，我还尝试删除此容器，以便

  window

  可以处理滚动，但这也没有解决该错误

• 我试着尽可能地复制这个例子，但到目前为止还没有成功

最后，这里是一个简化的代码片段：

import React, { Component } from "react";
import { Table, Column, WindowScroller, AutoSizer } from "react-virtualized";
import "react-virtualized/styles.css";
import "./style.scss";

class AnalyticsResponsesReportTable extends React.Component {
  constructor(props) {
    ...
  }

  //Methods...

  render() {
    const data = this.props.values.data;

    return (
      <div className="AnalyticsResponsesReportTable">
        {data.length && (
          <WindowScroller>
            {({
              height,
              isScrolling,
              registerChild,
              onChildScroll,
              scrollTop
            }) => (
              <div>
                <AutoSizer disableHeight>
                  {({ width }) => (
                    <Table
                      ref="Table"
                      headerHeight={40}
                      height={height}
                      width={width}
                      autoHeight
                      rowCount={data.length}
                      rowHeight={40}
                      rowGetter={({ index }) => data[index]}
                      className="AnalyticsResponsesReportTable__table"
                      onRowClick={this.handleRowClick}
                    >
                     //Columns rendering here
                    </Table>
                  )}
                </AutoSizer>
              </div>
            )}
          </WindowScroller>
        )}
      </div>
    );
  }
}

export default AnalyticsResponsesReportTable;

import React，{Component}来自“React”；
从“react virtualized”导入{表、列、WindowScroller、AutoSizer}；
导入“react virtualized/styles.css”；
导入“/style.scss”；
类AnalyticsResponsesReportTable扩展React.Component{
建造师（道具）{
...
}
//方法。。。
render（）{
常量数据=this.props.values.data；
返回(
{data.length&&(
{({
身高
伊斯克罗林，
注册儿童，
在Childscroll，
卷轴
}) => (
{（{width}）=>(
数据[索引]}
className=“AnalyticsResponsesReportTable\uu表”
onRowClick={this.handleRowClick}
>
//此处呈现的列
)}
)}
)}
);
}
}
导出默认的AnalyticsResponsesReportTable；

在尝试了许多不同的组合之后，根本问题是我没有在

表上设置
scrollTop={scrollTop}
。我还需要将
scrollElement
设置为适当的容器。这个问题花了很长时间才解决，因为两者都是必需的，我想我只是测试了其中一个而没有测试另一个
以防有人再次遇到这个问题。这里是一个有效的小提琴：如果您删除
scrollTop={scrollTop}