React项目中在数组第三个元素后添加占位div的实现方案

这里提供两种优雅的实现方式，你可以根据代码可读性和后续扩展需求选择：

方案一：使用 flatMap 一次性处理渲染逻辑 #

利用数组的 flatMap 方法，在遍历区块时判断是否需要插入占位div，代码紧凑且无需拆分数组：

const MyBlocks = ({ id }: { id: string }) => {
  const { data, loading } = useQuery<GqlRes>(BlocksQuery, {
    ssr: false,
    errorPolicy: 'all',
    variables: {
      blocksId: parseInt(id, 10),
    },
  });

  if (loading) {
    return <CircularProgress />;
  }

  const blocks = data?.blocks || [];

  return (
    <React.Fragment>
      {blocks.flatMap((item, index) => {
        // 生成当前区块组件，优先用item的唯一id作为key，没有则用索引
        const block = <Block key={item.id ?? String(index)} data={item} />;
        
        // 仅在第三个区块（索引为2）后插入占位div，且总区块数超过3个
        if (index === 2 && blocks.length > 3) {
          return [block, <div key="placeholder" id="placeholder" />];
        }
        return [block];
      })}
    </React.Fragment>
  );
};

export default MyBlocks;

方案二：拆分数组分批次渲染 #

将数组拆分为前3个和剩余部分，逻辑拆分更清晰，后续若要对前3个区块做单独样式或逻辑处理会更方便：

const MyBlocks = ({ id }: { id: string }) => {
  const { data, loading } = useQuery<GqlRes>(BlocksQuery, {
    ssr: false,
    errorPolicy: 'all',
    variables: {
      blocksId: parseInt(id, 10),
    },
  });

  if (loading) {
    return <CircularProgress />;
  }

  const blocks = data?.blocks || [];
  const firstThreeBlocks = blocks.slice(0, 3);
  const remainingBlocks = blocks.slice(3);

  return (
    <React.Fragment>
      {/* 渲染前3个区块 */}
      {firstThreeBlocks.map((item, index) => (
        <Block key={item.id ?? String(index)} data={item} />
      ))}
      {/* 总区块数超过3时才渲染占位div */}
      {blocks.length > 3 && <div id="placeholder" />}
      {/* 渲染剩余区块 */}
      {remainingBlocks.map((item, index) => (
        <Block key={item.id ?? String(index + 3)} data={item} />
      ))}
    </React.Fragment>
  );
};

export default MyBlocks;

注意事项 #

• 尽量使用区块数据的唯一标识（比如 item.id）作为组件key，避免用索引当key——当数组元素顺序变化时，索引key会导致React错误复用组件，引发不必要的渲染或状态问题。
• 两种方案都做了空值处理（data?.blocks || []），避免因后端返回空数据导致的报错。

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