Javascript 如何使用React js实现一行4个图像的虚拟滚动

我当前正在显示中的图像

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

所以现在我把它显示为

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

但我无法在尝试后的React中实现虚拟滚动

我有两个问题：

我必须选择列表还是基于网格的滚动

我已在MyArray中存储了一个数组，因此如何将该数组发送到下面的列表

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

我正在显示svg的

---

更新的实现：

您需要使用

网格

srolling。 请参阅下面一行中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')
);

与SVG一起实施。

德克斯特，请确保你所有的图片都在公用文件夹内（下面的截图）

您需要手动将它们添加到

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”导入React；
从“react virtualized”导入{Grid}；
//作为数组数组的网格数据
常量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']，
//等等。。。
];
函数cellRenderer（{columnIndex，key，rowIndex，style}）{
返回(
)
}
函数App（）{
返回(
使用SVG进行测试
);
}
导出默认应用程序；

您需要使用

网格

滚动。 请参阅下面一行中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')
);

与SVG一起实施。

德克斯特，请确保你所有的图片都在公用文件夹内（下面的截图）

您需要手动将它们添加到

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”导入React；
从“react virtualized”导入{Grid}；
//作为数组数组的网格数据
常量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']，
//等等。。。
];
函数cellRenderer（{columnIndex，key，rowIndex，style}）{
返回(
)
}
函数App（）{
返回(
使用SVG进行测试
);
}
导出默认应用程序；

代码沙盒或代码笔会很有帮助。请张贴您的密码@Ashish作为代码沙盒不接受SVG和安装软件包，但我也实现了逻辑，因此代码沙盒或代码笔将很有帮助。请张贴您的密码@Ashish作为代码沙盒不接受svg和安装包，但我的实现逻辑不适用于它svgs@Artem请检查更新的问题请检查我实现svg的这个沙盒嘿，德克斯特，这个沙盒不适合我（404-找不到）。请你更新一下好吗？也，你能给我一个或两个你正在尝试使用的svg吗？@Artem你下载任何svg文件都可以，代码沙盒不接受svg这是最好的选择issue@Artem在这里，请检查这个stackblitz在这里，我们有图像的逻辑，它使用displayinh svg作为列表不工作svgs@Artem请检查更新的问题请检查此沙盒我像这样实现了svg嘿，德克斯特，沙盒不适合我（404-找不到）。请你更新一下好吗？另外，你能给我一个或两个你正在尝试使用的svg吗？@Artem你下载任何svg文件都可以，代码沙盒不接受svg，这是最好的选择issue@Artem在这里，请检查这个stackblitz在这里，我们有使用displayinh svg作为列表的逻辑图像