React 17 函数组件Return中如何使用Switch实现条件渲染

开发者阿泽

2026-10-12

问题根源

你代码中定义的匿名函数仅完成了声明未执行，React会将函数对象本身当作待渲染值，而非函数的返回结果，因此没有内容输出。

解决方案

以下提供几种适配不同场景的写法，均支持后续8-10个条件分支的扩展需求：

方案1：立即执行匿名函数

直接在JSX的插值语法中调用声明的匿名函数即可拿到返回值，适合逻辑简单的小场景：

const Search = (props) => {
  let test = 'foo';
  return (
    <div>
      {/* 用括号包裹函数后加()立即执行，也可简写为箭头函数形式 */}
      {(() => {
        switch(test) {
         case 'foo':
          return 'foo12345';
         case 'bar':
          return 'bar67890';
         default:
          return 'aaaa';
         }
      })()}      
    </div>
  )
}

方案2：将分支逻辑抽离到return外部

适合分支多、逻辑复杂的场景，代码可读性和可维护性更高：

const Search = (props) => {
  let test = 'foo';

  // 单独封装渲染逻辑
  const getRenderContent = () => {
    switch(test) {
      case 'foo':
        return 'foo12345';
      case 'bar':
        return 'bar67890';
      // 后续新增分支直接在这里加case即可
      default:
        return 'aaaa';
    }
  }

  return (
    <div>
      {getRenderContent()}
    </div>
  )
}

方案3：对象映射写法（分支多的场景更推荐）

如果所有分支的判断逻辑都是等值匹配，用对象映射替代Switch语句，新增分支只需新增键值对，代码更简洁：

const Search = (props) => {
  let test = 'foo';
  // 定义分支映射关系
  const contentMap = {
    foo: 'foo12345',
    bar: 'bar67890',
    // 后续新增分支直接加键值对即可
  }

  return (
    <div>
      {contentMap[test] || 'aaaa'}
    </div>
  )
}

注意事项