React-virtualized: игнорировать строки, когда calcRowHeight возвращает 0 - PullRequest
0 голосов
/ 09 июля 2019

Я использую реагирующую виртуализацию для рендеринга большого массива в многосетку.Это выглядит примерно так:

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 строки (например), я обнаружил, что реагирующая виртуализация отображает первые 2K строки (так как их высота равна 0, она не учитывает текак видимый и, следовательно, продолжает рендеринг), который перегружает память браузера.

На данный момент, я не знаю, что делать ... Я не могу изменить свой набор данных, к сожалению, к сожалению.Как я могу сказать, что реагирует на виртуализацию, чтобы не отображать строку (подмножество ячеек в моей многосетке), когда высота === 0?

большое спасибо,

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...