Как создать виртуальную прокрутку изображений с помощью React js

Если у вас возникли проблемы с реализацией виртуальной прокрутки, обратите внимание, что при этом важен порядок импорта, поэтому обратите на это внимание — это может способствовать вашей проблеме. (Кроме того, существует npm-плагин для реализации виртуального списка.)

Обзор порядка импорта для виртуальной прокрутки:

import * as React from 'react';
import Paper from '@material-ui/core/Paper';
import {
  Grid,
  VirtualTable,
  TableHeaderRow,
} [from material ui];

import {
  your-components
} from 'your-path';

(выше не конкретно, просто примерное руководство по порядку)

Вы также можете использовать ScrollView, если вы не можете реализовать «виртуальную прокрутку». Следующий стиль даст вам горизонтальную прокрутку (в отличие от вертикальной по умолчанию), чтобы вы могли отображать свои изображения в строке с горизонтальной прокруткой.

<ScrollView horizontal = {true}> 

Надеюсь это поможет

вы также можете использовать плагин https://github.com/bvaughn/реакт-виртуализированный, если вы хотите отобразить это как таблицу, вы можете выбрать список или вы также можете выбрать сетку. Для вашего требования я рекомендую использовать Каменная кладка из «реагирующей виртуализации»;

ниже образец для отображения

import React from 'react';
import {
  CellMeasurer,
  CellMeasurerCache,
  createMasonryCellPositioner,
  Masonry
} from 'react-virtualized';

import 'react-virtualized/styles.css';

var images = [];
const columnWidth = 250;
const defaultHeight = 260;
const defaultWidth = columnWidth;

const cache = new CellMeasurerCache({
  defaultHeight,
  defaultWidth,
  fixedWidth: true
})

// Our masonry layout will use 3 columns with a 10px gutter between
const cellPositioner = createMasonryCellPositioner({
  cellMeasurerCache: cache,
  columnCount: 4,
  columnWidth,
  spacer: 27
})

function cellRenderer ({ index, key, parent, style }) {
  const datum = images[index]

  const height = columnWidth  ||  defaultHeight ;

  return (
    <CellMeasurer
      cache = {cache}
      index = {index}
      key = {key}
      parent = {parent}
    >
      <div style = {style}>
        <img
          src = {datum}
          style = {{
            height: height,
            width: columnWidth,
            display: "block"
          }}
          alt = "info"
        />

      </div>
    </CellMeasurer>
  )
}


class Grid extends React.Component{

  importAll(r) {
    return r.keys().map(r);
  }
  componentWillMount() {
    images = this.importAll(require.context('../imageFolder/', false, /\.(png|jpe?g|svg)$/));
  }
  render(){
    return(
      <div  id = "container">
          <div id = "viewport">

             <Masonry
            cellCount = {images.length}
            cellMeasurerCache = {cache}
            cellPositioner = {cellPositioner}
            cellRenderer = {cellRenderer}
            height = {400}
            width = {1320}

        />
          </div>

      </div>
    )
  }
}

export default Grid;

Я надеюсь, что это решит вашу проблему