React-virtualized:当calcRowHeight返回0时忽略行

Question

我正在使用react-virtualized来渲染多网格中的大数组。它看起来像这样：

class ImportContainer extends React.Component<IImportContainerProps, IImportContainerState> {

  grid;

  componentDidUpdate(prevProps) {
    if (prevProps.toggleState !== this.props.toggleState) {
      this.refreshGridRows(0, 0);
    }
  }

  componentWillUnmount() {
  }

  refreshGridRows = (start: number = 0, end: number = (this.state.gridRowCount - this.state.fixedRowCount)) => {
    this.grid.recomputeGridSize({columnIndex: this.state.fixedColumnCount, rowIndex: 0});
  }

  calcRowHeight = (I) => { 
    if (this.state.myData[I.index].randomBool === this.props.toggleState) {
      return 0;
    } else {
      return 25;
    }
  }

  render() {

    return <>
      <AutoSizer>
        {({ height, width }) => <MultiGrid
          ref={this._setRef}
          rowHeight={this.calcRowHeight}
          [...]
        />
        }
      </AutoSizer>
    </>;
  }
}

export default ImportContainer;

这大大简化了，但主要的概念是存在的。

因此，我切换this.props.toggleState，触发recomputeGridSize，然后this.calcRowHeight将显示/或隐藏所需的行。一种简单的数据过滤方法。

它在小集合中工作得很好。但是，当处理需要隐藏前2K行的巨大集合时(例如)，我发现react-virtualized正在渲染前2K行(因为它们的高度为0，它不会认为这些行是可见的，因此会继续渲染)，这会使浏览器内存超载。

在这一点上，我不知道该怎么做...不幸的是，我不能更改我的数据集。当height ===为0时，我如何告诉react-virtualized不渲染一行(我的multigrid中的单元格的子集)？

非常感谢,

Answer 1

它是(或者曾经是) react-virtualized的一个已知bug。诀窍是将高度设置为0.1px，这样它就会产生一个“不可见”的行。在数千行上，显示质量是可以接受的。如果可能的话，最好的解决方案仍然是生成一个新的数据集。