React.js如何根据文件列表长度动态定义渲染判断条件

核心判断逻辑 #

不需要硬编码枚举所有文件长度值，利用*取模运算（%）*就可以匹配步长为3的所有分组规则：对文件列表长度做除以3取余数，根据余数即可判断当前所属场景，覆盖任意长度的文件列表。
对应关系如下：

• 余数为1：匹配长度1、4、7、10……场景，渲染已上传预览 + 2个空占位框
• 余数为2：匹配长度2、5、8、11……场景，渲染已上传预览 + 1个空占位框（即原有硬编码兼容的场景）
• 余数为0：分两种子场景
  • 文件长度为0（初始无上传）：渲染3个空占位框
  • 文件长度为3、6、9、12……（满组状态）：渲染全部已上传预览 + 加号新增按钮，点击后新增3个空占位框支持继续上传

代码实现 #

首先抽离公共计算变量，避免在JSX里写冗长的判断条件：

// 兼容files不存在的边界场景，默认按0个文件处理
const fileCount = files?.length || 0;
const remainder = fileCount % 3;

let emptySlotCount = 0;
let showAddButton = false;

if (fileCount === 0) {
  // 初始状态渲染3个空上传位
  emptySlotCount = 3;
} else if (remainder === 0) {
  // 凑整3/6/9...个文件时，展示加号按钮，不显示空占位
  showAddButton = true;
} else {
  // 余数为1/2时，自动计算需要补的空占位数量
  emptySlotCount = 3 - remainder;
}

然后替换原有硬编码的渲染逻辑，用循环生成对应数量的占位框，不需要为每个场景写单独的JSX块：

{Array.isArray(files) && (
  <div className="app2">
    {/* 渲染所有已上传的图片预览 */}
    {files.map((file, index) => (
      <div 
        className="container" 
        onClick={handleClick} 
        key={file?.id || `preview-${index}`}
      >
        <img src={file.url} alt={`上传预览${index + 1}`} className="image" />
      </div>
    ))}

    {/* 循环渲染对应数量的空上传占位 */}
    {Array.from({ length: emptySlotCount }).map((_, index) => (
      <div 
        className="container" 
        onClick={handleClick} 
        key={`empty-slot-${index}`}
      ></div>
    ))}

    {/* 满组时展示新增按钮 */}
    {showAddButton && (
      <div 
        className="container add-trigger" 
        onClick={handleAddMoreSlots}
      >
        +
      </div>
    )}
  </div>
)}

注意事项 #

• 原有代码中类名contianer为拼写错误，修正为标准的container即可避免样式匹配失效问题
• 加号按钮对应的handleAddMoreSlots方法，只需要往文件列表里追加3个待上传的占位项即可，不需要调整现有渲染判断逻辑
• 渲染列表时补充key属性，避免React控制台警告

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