Question

我的要求是什么：我的外部文件夹中有一些图像，我需要导入到组件并显示它，还必须使用 Virtual Scroll ，在这里我必须在div和那一行必须显示5-6张图像

我做了什么：我使用外部文件夹中的上下文使用了图像，并在div中显示了1行图像，并显示了5-6张图像，但是我面临无法将其设置为虚拟滚动

我检查了react-virtualized和react-window插件，但不确定如何以这种格式使用数据

使用react-tiny-virtual-list图像后，图像会堆积起来

下面是我的代码

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

如果您在实现虚拟滚动时遇到麻烦，请注意，导入顺序在执行此操作时很重要，因此请注意这一点-这可能会助您一臂之力。（顺便说一句：有一个npm plugin用于实现虚拟列表。）

虚拟滚动的导入顺序概述为：

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

希望这会有所帮助

Answer 2

如果您想将其显示为表格，也可以在其中使用https://github.com/bvaughn/react-virtualized插件，您可以选择列表，也可以选择网格。对于您的要求，我建议使用'strong-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;

我希望这可以解决您的问题

如何使用React js

2 个答案: