MUI v0根据文件上传状态条件渲染MenuItem禁用状态实现咨询

核心实现非常简单，你当前的buildMenuItems函数已经接收了单条日志对应的resource对象，这个对象本身就包含表格配置里的status字段，不需要额外拉取数据或者做字段映射，只要把下载按钮硬编码的禁用状态改成动态判断即可。

修改步骤 #

• 找到buildMenuItems里下载项的disabled属性，当前代码写死了disabled={true}，这也是下载按钮一直置灰的原因
• 把硬编码的true替换为判断表达式：resource.status === 'failed'，即上传状态为失败时返回禁用，状态为成功时返回可用

修改后的完整代码：

const buildMenuItems = (resource) => {
  return [
    <MenuItem 
      primaryText='File Details' 
      key='detail' 
      value={`/security/log-history/${resource.id}/detail`} 
    />,
    <MenuItem 
      primaryText='Download File' 
      key='download' 
      value={`/security/log-history/${resource.id}/download`} 
      disabled={resource.status === 'failed'}
    />
  ]
}

可选兜底优化 #

如果存在数据加载阶段resource.status还未返回的场景，可以给判断加空值兜底，避免加载过程中下载按钮提前变为可点击：

disabled={!resource.status || resource.status === 'failed'}

原有表格的列配置不需要做任何改动，只要保证调用buildMenuItems渲染行操作菜单时，传入的是该行完整的数据源对象即可。

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