React中能否在return语句内使用switch语句减少重复渲染代码？

你预期的直接在JSX里写switch的写法无法直接运行，核心原因是：JSX的大括号插值位仅支持写入表达式，switch属于流程控制语句，不能直接嵌入JSX结构。要抽离公共的Component1、避免重复代码，有以下几种可落地的实现方式：

方案1：立即执行函数包裹switch（最贴合你预期的写法） #

用立即执行函数表达式（IIFE）把switch逻辑包裹成一个可执行的表达式，就能直接嵌入JSX，同时注意同级多元素需要用Fragment（空标签<>...</>）包裹，符合JSX语法要求：

const Component = () => {
  let x = 1
   
  return (
    <>
      <Component1 />
      {
        (() => {
          switch(x) {
            case 1: 
              return <Component2 />
            case 2: 
              return <Component3 />
            default:
              return null
          }
        })()
      }
    </>
  )
}

方案2：三元运算符（适合双分支场景） #

如果只有2个判断分支，直接用三元运算符写更简洁，不需要额外包裹函数：

const Component = () => {
  let x = 1
  return (
    <>
      <Component1 />
      {x === 1 ? <Component2 /> : <Component3 />}
    </>
  )
}

方案3：对象映射（适合多分支场景，扩展性最好） #

如果后续判断分支会继续增加，用对象做映射表的方式维护性更高：

const Component = () => {
  let x = 1
  const renderMap = {
    1: <Component2 />,
    2: <Component3 />
  }
  return (
    <>
      <Component1 />
      {renderMap[x] ?? null}
    </>
  )
}

补充：你最初贴的原始实现中，return后直接跟两个同级组件没有外层包裹，本身就不符合JSX语法规则，运行时会直接报错，所有多同级元素的返回都需要用Fragment或者其他容器标签包裹。

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