React动态缩略图切换：switch函数失效问题及实现方案选择

你的代码存在三个核心问题，直接导致switch函数失效： #

1. case值未加引号：image/jpeg这类MIME类型是字符串，你没加单/双引号，JS会把它当成未定义变量，根本匹配不到对应分支。
2. 无return也无break：就算匹配到case，你只是创建了组件但没返回；同时没加break会触发fallthrough，继续执行后续所有case逻辑。
3. 函数调用方式错误：{() => testSwitch(item)}是定义了一个箭头函数但未执行，JSX不会渲染这个函数的返回值，应该直接调用函数：{testSwitch(item)}。

修正后的switch版本代码 #

const testSwitch = (item) => {
  switch(item.contentType){
    // 图片类型合并分支，减少重复代码
    case 'image/jpeg':
    case 'image/tiff':
    case 'image/png':
    case 'image/bmp':
      return <img src={item.url} alt="Attachment thumbnail" />;
    case 'text/plain':
      return <TextSnippetIcon />;
    case 'video/mp4':
      return <VideoFileIcon />;
    case 'audio/mpeg':
      return <AudioFileIcon />;
    case 'application/pdf':
      return <PictureAsPdfIcon />;
    // 加默认分支，避免未匹配到类型时无返回
    default:
      return <UnknownFileIcon />;
  }
}

// map循环里的调用修正
{attachmentInfo.map((item,index) => {
  return(
    <Grid container lg={3} key={index}>
      {testSwitch(item)}
    </Grid>
  )
})}

方案选择：switch vs 三元运算符 #

• 三元运算符仅适合2-3种简单分支，你这里有8种以上类型分支，用switch逻辑更清晰，可读性更强。
• 更推荐用对象映射方案，代码更简洁易维护，新增类型时只需在映射对象里添加条目，无需修改逻辑代码：

// 提前定义类型与组件的映射关系
const typeComponentMap = {
  'image/jpeg': (item) => <img src={item.url} alt="Attachment thumbnail" />,
  'image/tiff': (item) => <img src={item.url} alt="Attachment thumbnail" />,
  'image/png': (item) => <img src={item.url} alt="Attachment thumbnail" />,
  'image/bmp': (item) => <img src={item.url} alt="Attachment thumbnail" />,
  'text/plain': () => <TextSnippetIcon />,
  'video/mp4': () => <VideoFileIcon />,
  'audio/mpeg': () => <AudioFileIcon />,
  'application/pdf': () => <PictureAsPdfIcon />
};

// map循环中使用
{attachmentInfo.map((item,index) => {
  // 取对应组件，默认返回未知文件图标
  const renderComponent = typeComponentMap[item.contentType] || (() => <UnknownFileIcon />);
  return(
    <Grid container lg={3} key={index}>
      {renderComponent(item)}
    </Grid>
  )
})}

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