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

Question

Каковы мои требования: у меня есть несколько изображений в моей внешней папке, и мне нужно импортировать в компонент и отобразить его, а также использовать Виртуальный прокрутка здесь я должен отобразить 1 строку в div и в этом 1 ряд должен показывать 5-6 изображений

Что я сделал: я использовал изображения, используя контекст из внешней папки, и показал изображения в 1 строке в div и 5-6 изображениях, но я столкнулся с проблемой, не в состоянии установить Виртуальная прокрутка

, как я проверил плагин реагировать на виртуализацию и реагировать на окно, но я не уверен, как мои данные используются в этом формате

После использования реагирующего крошечного виртуального списка образы складываются

ниже мой код

class App extends React.Component{

  state={
    Response:[],

  }
  importAll(r) {
    return r.keys().map(r);
  }
  componentWillMount() {
    let data = this.importAll(require.context('./imageFolder/', false, /\.(png|jpe?g|svg)$/));
    this.setState({ Response:data})
  }





  render(){
    return(
      <div className="container" id="imagecontainer">
        <div className="viewport"> 
              {this.state.Response.map((image, index) =>    <img key={index} src={image} alt="info"></img>      )} }
           </div> 


      </div>
    )
  }


 .container {
      padding: 0% 6%;
      height: 400px;
    }
    .viewport {
      height: -webkit-fill-available;
      width: 100%;
      border: 1px solid black;
      overflow: scroll;
    }

img {
  height: 250px;
  width: 150px;
  padding: 35px;
}


After implementing React-tiny-list
 <div id="container">
      <div id="viewport">
      <VirtualList
    height='400px'
    width='100%'
    itemCount={this.state.items.length}
    itemSize={20} // Also supports variable heights (array or function getter)
    style={{padding:'20px'}}
    renderItem={({index, style}) =>
      <div key={index} style={style}> 

        <img key={index} src={this.state.items[index]} alt="info"></img>
      </div>
    }
  />
      </div>

    </div>

Answer 1

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

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

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;

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

Answer 2

Если у вас возникли проблемы с реализацией виртуальной прокрутки, обратите внимание, что при этом важен порядок импорта, поэтому обратите на это внимание - это может способствовать вашей проблеме. (Кроме того, существует плагин 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}> 

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