reactjs - 如何在使用材质 ui Skeleton 组件做出反应的循环阵列上显示多个加载骨架屏幕？

Question

我正在处理通过 API 端点获取数据的反应项目。我正在为 UI 组件使用 Material-UI。我想从 material-ui 实​​现 Skeleton 组件以在等待从后端获取数据时显示加载。

问题是，我可以在获取数据时显示骨架，但我想显示要为数组中正在循环的所有项目显示的骨架组件。

这里有什么工作

这里是我想要的..

如果 api 返回包含六个对象的数组的响应，我想显示骨架加载组件以在屏幕上显示六次。

我怎样才能做到这一点。

标签： reactjs

Answer 1

拥有骨架的想法是让用户预览获取数据时 UI 的外观，以便提供良好的用户体验。

但是 UI 怎么知道我们需要渲染 6 个骨架。此信息必须来自 API。但是，当您执行类似response.data.length确定 size 的操作时，您已经在 UI 中获得了响应。当你已经有回应时，为什么要显示skeleton？所以恕我直言，我们不应该专注于将骨架长度与您的响应长度相匹配。只需渲染在 UI 中看起来不错的骨架编号。

 if (loading) {
    return <ListSkeleton listsToRender={8} />; // pass the no you want as a prop
  }  

列表骨架

 const ListSkeleton = ({listsToRender}) => {
  return (
    <>
      {Array(listsToRender)
        .fill(1)
        .map((card, index) => (
           // render your skeleton here
        ))}
    </>
  );
};