React.js中无需map/forEach实现骨架加载占位符的问题求助

不用array.map/forEach也能轻松生成多个预加载占位符，核心是用for循环构建元素数组，再直接渲染这个数组就行。下面给你两种可行的写法：

方法一：组件内直接构建占位符数组 #

直接在组件里用for循环把占位符元素塞进数组，当products为空时渲染这个数组：

function ProductList({ products }) {
  // 生成10个骨架占位符
  const skeletonPlaceholders = [];
  for (let i = 0; i < 10; i++) {
    skeletonPlaceholders.push(
      <div key={`skeleton-${i}`} className="skeleton-item">
        <div className="skeleton-img"></div>
        <div className="skeleton-text skeleton-text--short"></div>
        <div className="skeleton-text skeleton-text--long"></div>
      </div>
    );
  }

  // 产品为空时显示占位符，否则渲染正常列表
  if (products.length === 0) {
    return <div className="product-grid">{skeletonPlaceholders}</div>;
  }

  return (
    <div className="product-grid">
      {/* 正常产品列表渲染逻辑 */}
      {products.map(prod => (
        <div key={prod.id} className="product-card">
          {/* 产品内容 */}
        </div>
      ))}
    </div>
  );
}

方法二：封装成独立生成函数 #

如果需要多处复用，把生成逻辑封装成函数，返回完整的占位符数组：

// 生成指定数量的骨架占位符
function createSkeletons(count) {
  const skeletons = [];
  for (let i = 0; i < count; i++) {
    skeletons.push(
      <div key={`skel-${i}`} className="skeleton-item">
        <div className="skeleton-img"></div>
        <div className="skeleton-text"></div>
      </div>
    );
  }
  return skeletons;
}

// 在组件中调用
function ProductList({ products }) {
  if (products.length === 0) {
    return <div className="grid">{createSkeletons(20)}</div>;
  }

  // 正常渲染产品
  return <div className="grid">{/* 产品列表 */}</div>;
}

为啥你之前的for循环没生效？ #

大概率是这两个问题：

1. 循环里直接return单个占位符，导致只生成第一个元素就终止了；
2. 没有把生成的元素收集到数组里，最后没返回完整的元素集合。

只要把所有占位符元素存入数组，再整体渲染这个数组，就能一次性显示多个骨架了。

内容的提问来源于stack exchange，提问作者syber man