React Virtualized：Table 行在 autoHeight 开启时被截断

Question

我目前正在尝试实施 React Virtualized 来替换滞后的 table 但我运行遇到了问题。我正在使用来自 React Virtualized 的 WindowScroller、AutoSizer、Table 和 Column，

在我的 400 行 table 中，大约有 30 行在它们停止显示之前出现（因为那些 DOM 元素尚未呈现）。但是，table 似乎是正确的高度。这是一张有助于形象化的图片：

据我所知，罪魁祸首是 <Table /> 元素上的 autoHeight（或与之相关）。当我删除它时，我可以滚动浏览 Table 中的所有行元素。但是，这破坏了能够滚动页面的所需功能，而不是 Table.

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

我想到问题可能出在 WindowScroller 上的 scrollElement，因为我的 table 的容器元素有 overflow: scroll; height: 100vh。当我尝试将 scrollElement 属性设置为我的行的此元素 none 时，将呈现。出于测试目的，我还尝试删除此容器，以便 window 可以处理滚动，但这也没有解决错误。
我已尝试尽可能接近地复制 this 示例，但到目前为止还没有骰子。

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

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;

Answer 1

在尝试了许多种不同的组合后，根本问题是我没有在Table 上设置scrollTop={scrollTop}。我还需要将 scrollElement 设置为适当的容器。这个问题花了很长时间才解决，因为两者都需要，我想我只是测试了一个，没有另一个

React Virtualized：Table 行在 autoHeight 开启时被截断

React Virtualized: Table rows get cut off when autoHeight is on

javascript

reactjs

react-virtualized