reactjs - 延迟加载和对象数组而不是组件？

Question

我正在使用 material-ui 做一个 reactjs 应用程序，我已经看到了许多 reacjs 延迟加载组件的示例。但是我有一个来自 material-ui 的 GridListTile 对象数组，我将它们加载到 Gridlist 组件中，这个 GridListTile 数组是一个 array.map() 即时调用..

我已经尝试将 Suspense 放在 GridList 和 array.map() 中，我在lazy() 调用中返回每个 GridListTile，但显然它无法正常工作，因为它需要一个组件等......

这是我的网格列表：

           <Paper style={{ margin: 25, padding: 25 }}>
            <GridList
              spacing={10}
              cols={5}
              cellHeight="auto"
            >
              <Suspense fallback={<div>Loading...<div>}
              {this.state.collectionList}
              </Suspense>
            </GridList>
          </Paper>

这是我的 array.map() 我返回 this.state.collectionList 的内容

            const tempCollectionList = res.data.map(item => {
            return (
              lazy.(() = (
              <GridListTile key={item._id}>
                  <img
                    src={item.pathToImage}
                    alt={item.title}
                  />
              </GridListTile>
            ));
          });
          this.setState({
            collectionList: tempCollectionList
          });

但我只是得到错误，很多，比如那些不是反应组件和很多其他错误..关键是它没有加载，原因很明显，延迟加载仅适用于组件

但是我怎样才能实现对象数组的延迟加载呢？我在 this.state.collectionList 中有 100 多个图块。

标签： reactjslazy-loadingmaterial-ui