React中如何在对象数组内添加条件判断实现按需渲染额外图标按钮

问题原因 #

你自定义的if/then/else结构不属于标准的按钮配置对象，原有遍历渲染逻辑没有对这种自定义结构做解析，因此无法正常生效。

实现方案 #

完全不需要重复定义公共图标，直接在数组构造阶段通过条件扩展运算符拼接对应标签页的额外配置项即可，原有渲染逻辑不需要做任何修改。

代码示例 #

const iconButtonList = [
  // 原有公共固定图标直接保留，无需改动
  {
    icon: <AddIcon />,
    onClick: onClickOpenRuleEditor,
    isDisabled: false,
    label:"Add"
  },
  {
    icon: <EditIcon />,
    onClick: onClickOpenRuleEditor,
    isDisabled: isEditDisabled
  },
  {
    icon: <CopyIcon />,
    onClick: onClickCopyRules,
    isDisabled: true
  },
  {
    icon: <TrashIcon />,
    onClick: onDelete,
    isDisabled: isRemoveDisabled
  },
  {
    icon: <RefreshIcon />,
    onClick: onClickRefreshRulesGrid,
    isDisabled: false
  },
  // 新增条件项，根据selectedTab的值动态插入对应配置
  ...(selectedTab === 0 ? 
    [
      {
        icon: <DeploymentIcon />,
        onClick: onClickDeploy,
        isDisabled: true
      }
    ] : 
    [
      {
        icon: <DocumentExcelIcon />,
        onClick: onClickUndeploy,
        isDisabled: true
      }
    ]
  )
];

扩展说明 #

如果后续需要同时展示多个条件项，只需要在对应分支的数组里添加多个配置对象即可。如果担心用index作为key会导致渲染异常，可以给每个配置项增加唯一id属性，渲染时取id作为key值。

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