javascript - React 虚拟化 : Table rows get cut off when autoHeight is on

Question

我目前正在尝试实现 React Virtualized 以替换滞后的表，但遇到了问题。我正在使用WindowScroller , AutoSizer , Table ，和Column来自 React 虚拟化，

在我的 400 行表中，大约有 30 行在停止显示之前出现(因为那些 DOM 元素尚未渲染)。然而， table 的高度似乎是正确的。这是一张有助于形象化的图片:

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

到目前为止我测试过的事情:

• 我想到问题可能出在 scrollElement 上。上WindowScroller因为我的表的容器元素有 overflow: scroll; height: 100vh 。当我尝试设置scrollElement时该元素的属性我的行都不会呈现。出于测试目的，我还尝试删除此容器，以便 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 设置为适当的容器。这个问题花了很长时间才解决，因为两者都是需要的，而且我想我刚刚测试了一个而没有另一个