Question

我当前正在

中显示图像

 {images.map((image, index) =>    <img key={index} src={image} alt="info"></img>      )}

，每行必须显示5张图像。假设我有一个数组中的文件列表：

 MyArray = [1.png,2.png,3.png,4.png,5.png,................]

所以目前我将其显示为

1,2,3,4,5
 6,7,8,9,10

但是尝试react virtualized后，我无法在React中实现虚拟滚动。

我有2个查询：

我是否必须选择基于列表或网格的滚动？

我已将数组存储在 MyArray 中，那么如何将数组发送到下面的列表中？

<List
  width={rowWidth}
  height={listHeight}
  rowHeight={rowHeight}
  rowRenderer={this.renderRow}
  rowCount={this.list.length}
  overscanRowCount={3} 
/>

我正在显示svg的

更新的实现：

Answer 1

您将需要使用Grid滚动。请在下面连续查看4张图片的基本实现。您将需要根据需要调整样式和其他视觉元素。

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid } from 'react-virtualized';

// Grid data as an array of arrays
const myArray = [
  [1.png,2.png,3.png,4.png],
  [5.png,6.png,7.png,8.png],
  // And so on...
];

function cellRenderer ({ columnIndex, key, rowIndex, style }) {
  return (
    <img
      key={key}
      style={style}
      src={myArray[rowIndex][columnIndex]}
      alt="info"
    />
  )
}

// Render your grid
ReactDOM.render(
  <Grid
    cellRenderer={cellRenderer}
    columnCount={4}
    columnWidth={100}
    height={300}
    rowCount={myArray.length}
    rowHeight={30}
    width={300}
  />,
  document.getElementById('example')
);

此外，这是我在计算机上运行以测试实现的代码。我用create-react-app做到了。包括正在运行的应用程序的屏幕截图。

import React from 'react';
import { Grid } from 'react-virtualized';

// Grid data as an array of arrays
const myArray = [
  ['https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg'],
  ['https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg'],
  ['https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg'],
  ['https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg'],
  ['https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg'],
  ['https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg'],
  ['https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg'],
  ['https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg'],
  ['https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg'],
  ['https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg'],
  ['https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg'],
  ['https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg','https://i.imgur.com/NVHKPPq.jpg'],
  // And so on...
];

function cellRenderer ({ columnIndex, key, rowIndex, style }) {
  return (
      <div
        key={key}
      >
      <img
        style={style}
        src={myArray[rowIndex][columnIndex]}
        alt="info"
      />
      </div>
  )
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>TESTING WITH CATS</h1>
          <Grid
            cellRenderer={cellRenderer}
            columnCount={4}
            columnWidth={100}
            height={200}
            rowCount={myArray.length}
            rowHeight={100}
            width={1200}
          />
      </header>
    </div>
  );
}

export default App;

SVG的实现。

Dexter，请确保所有图像都位于公用文件夹内（下面的屏幕截图）。

您将需要手动将它们添加到myArray。或者，您可以编写一个函数来自动为您导入它们，并将它们推入4个较小的数组中。

import React from 'react';
import { Grid } from 'react-virtualized';

// Grid data as an array of arrays
const myArray = [
  ['/images/11.svg','/images/11.svg','/images/11.svg','/images/11.svg'],
  ['/images/11.svg','/images/11.svg','/images/11.svg','/images/11.svg'],
  ['/images/11.svg','/images/11.svg','/images/11.svg','/images/11.svg'],
  ['/images/11.svg','/images/11.svg','/images/11.svg','/images/11.svg'],
  // And so on...
];

function cellRenderer ({ columnIndex, key, rowIndex, style }) {
  return (
      <div
        key={key}
      >
          <img
            style={style}
            src={myArray[rowIndex][columnIndex]}
            alt="info"
          />
      </div>
  )
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>TESTING WITH SVGS</h1>
          <Grid
            cellRenderer={cellRenderer}
            columnCount={4}
            columnWidth={100}
            height={200}
            rowCount={myArray.length}
            rowHeight={100}
            width={1200}
          />
      </header>
    </div>
  );
}

export default App;

如何使用React js实现连续4张图像的虚拟滚动

1 个答案: