React组件中支持两个可选字段入参的switch语句实现方法咨询

问题根因 #

你当前的代码存在传参不匹配的问题：你定义的getLabel函数接收2个可选入参，但是实际调用时只传入了node.type || node.typeXy这1个参数，虽然现有逻辑也能临时运行，但不符合你设计两个入参的初衷，也不利于后续扩展。

两种可行实现方案 #

方案1：保留双入参函数定义，修改调用逻辑

不需要改动已写好的switch分支，只需要把两个字段分别作为参数传入即可，会自动优先取type值，type不存在时 fallback 到typeXy：

// 调用代码修改
return (
  <Grid 
    items={data?.items?.map((node) => ({ 
      label: getLabel(node.type, node.typeXy), 
    }))} 
  />
);

原函数逻辑可正常运行：

const getLabel = (type?: string, typeXy?: string) => { 
  switch (type || typeXy) { 
    case 'Type A': return labelA; 
    case 'Type B': return labelB; 
    case 'Type X': return labelX; 
    case 'Type Y': return labelY; 
    default: return ''; 
  } 
};

方案2：保留现有调用逻辑，修改函数为单入参

如果你不想改动已有的调用代码，直接把函数调整为接收1个合并后的入参即可：

const getLabel = (typeVal?: string) => { 
  switch (typeVal) { 
    case 'Type A': return labelA; 
    case 'Type B': return labelB; 
    case 'Type X': return labelX; 
    case 'Type Y': return labelY; 
    default: return ''; 
  } 
};

优化建议（可选） #

如果后续需要新增类型，用对象映射代替switch语句维护性更高：

// 提前定义枚举映射
const LABEL_MAP = {
  'Type A': labelA,
  'Type B': labelB,
  'Type X': labelX,
  'Type Y': labelY
} as const;

// 函数直接简化为一行
const getLabel = (type?: string, typeXy?: string) => LABEL_MAP[type || typeXy] ?? '';

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