React-virtualized, List мерцает/отстает при прокрутке

У меня возникли проблемы при прокрутке списка. Также обратите внимание на огромное пространство внизу. Смотрите видео: https://vimeo.com/215349521

Насколько я вижу, я не делаю серьезных ошибок. Но я верю, что проблема связана с CellMeasurer.

Версия Chrome: 58.0.3029.81

class PromotionList extends Component {

constructor(props) {
    super(props);

    this.cache = new CellMeasurerCache({
        defaultHeight: 100,
        fixedWidth: true,
    });

    this.rowRenderer = this.rowRenderer.bind(this);
}

componentWillMount() {
    this.props.fetchPromotionsIfNeeded();
}

rowRenderer({ index, parent }) {
    const { promotions } = this.props;
    const data = promotions.list[index];

    return (
      <CellMeasurer
        cache={this.cache}
        columnIndex={0}
        key={uuid.v1()}
        parent={parent}
        rowIndex={index}
      >
        <BlobItem
          key={uuid.v1()}
          type={BlobTypes.promotion}
          data={data}
          onClick={this.props.onItemClick}
          index={index}
        />
      </CellMeasurer>
    );
}


render() {
    const { promotions, previewSize } = this.props;

    return (
      <List
        height={300}
        width={previewSize.width}
        rowCount={promotions.list.length}
        deferredMeasurementCache={this.cache}
        rowHeight={this.cache.rowHeight}
        rowRenderer={this.rowRenderer}
        className="blobList"
      />
    );
}
}

reactjs react-virtualized
person Aleksander Aleksic    schedule 29.04.2017    source источник
comment
Хм. На первый взгляд это мерцание немного похоже на ошибку браузера. Может, похоже на то, что показано в этом комментарии? github.com/bvaughn/react-virtualized/issues/   -  person bvaughn    schedule 30.04.2017
comment
@brianvaughn Он не выглядит таким же тихим, мой подпрыгивает, даже если я перестаю прокручивать. Но это не CellMeasurer для Shure, удалил его и все равно. Но я согласен, это может быть ошибка браузера или что-то с компонентом списка, как это предлагается в предоставленной вами ссылке.   -  person Aleksander Aleksic    schedule 30.04.2017

Ответы (1)


arrow_upward
42
arrow_downward

Решение найдено после прочтения документации. Просто нужно было добавить стиль в метод rowRender:

rowRenderer({ index, parent, style }) {
  const { promotions } = this.props;
  const data = promotions.list[index];

  return (
    <CellMeasurer
      cache={this.cache}
      columnIndex={0}
      key={uuid.v1()}
      parent={parent}
      rowIndex={index}
    >
      <BlobItem
        key={uuid.v1()}
        type={BlobTypes.promotion}
        data={data}
        onClick={this.props.onItemClick}
        index={index}
        style={style}
      />
    </CellMeasurer>
  );
}
person Aleksander Aleksic    schedule 30.04.2017
comment
Спасибо, что нашли время ответить на свой вопрос! - person fancy; 29.05.2017
comment
магия. Я думаю, что понял это на основе документов (переключение статического позиционирования на относительное). если это причина, не могли бы вы обновить наш ответ / дать объяснение, почему это работает? - person azium; 21.08.2018
comment
Этот ответ сработал и для меня. Я просто окружил его ‹div›: ‹div style={style› ‹BlobItem .... /› ‹/div› @azium Я считаю, что это должно работать именно так, потому что я полагаю, что виртуализированная библиотека делать причудливые вещи с абсолютным позиционированием, чтобы перемещать ячейки по экрану. Без стиля все становится беспорядочным. - person Bonkles; 05.04.2019