如何使用React js创建图像的虚拟滚动

Question

我的要求是:我的外部文件夹中有一些图像，我需要导入组件并显示它，这里还必须使用虚拟滚动，我必须在div中显示1行，在这一行中必须显示5-6个图像。

我所做的:我使用外部文件夹的上下文使用图像，并在div和5-6图像中以1行显示图像，但我面临无法将其设置为虚拟滚动的问题。

当我检查了react虚拟化和react窗口插件时，我不知道我的数据是如何以那种格式使用的。

在使用了“反应小虚拟列表”之后，图像就被堆叠起来了。

下面是我的代码

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插件，如果您想要将其显示为表，您可以选择列表，也可以选择网格，也可以选择.For，我建议您从“反应虚拟化”中使用砌体；

下面是用于显示的示例

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}> 

希望这能有所帮助