ReactJS：如何在JSX中用switch语句，基于Props条件渲染组件

嘿，我明白你想根据Selected props的值，在<ReactSVGPanZoom>组件里渲染对应的子组件。你原来的写法有问题，因为JSX的{}里只能放表达式，而switch是语句，不能直接嵌入进去。下面给你几种可行的解决办法：

方法一：把switch逻辑抽成单独函数（推荐，可读性高） #

把条件判断的逻辑封装成一个函数，让它返回对应的组件，然后在JSX里调用这个函数就可以了：

import React from 'react';
import ComponentOne from './ComponentOne';
import ComponentTwo from './ComponentTwo';
import ComponentThree from './ComponentThree';
import ComponentFour from './ComponentFour';
import ReactSVGPanZoom from 'react-svg-pan-zoom';

function YourParentComponent(props) {
  // 封装switch逻辑到函数中
  const renderSelectedComponent = () => {
    switch(props.Selected) {
      case '1':
        return <ComponentOne />;
      case '2':
        return <ComponentTwo />;
      case '3':
        return <ComponentThree />;
      case '4':
        return <ComponentFour />;
      // 默认情况渲染ComponentOne
      default:
        return <ComponentOne />;
    }
  };

  return (
    <ReactSVGPanZoom>
      {/* 调用函数渲染对应组件 */}
      {renderSelectedComponent()}
    </ReactSVGPanZoom>
  );
}

export default YourParentComponent;

方法二：使用立即执行函数表达式（IIFE） #

如果不想单独抽函数，也可以用IIFE把switch包裹起来，直接写在JSX的{}里：

return (
  <ReactSVGPanZoom>
    {(() => {
      switch(props.Selected) {
        case '1':
          return <ComponentOne />;
        case '2':
          return <ComponentTwo />;
        case '3':
          return <ComponentThree />;
        case '4':
          return <ComponentFour />;
        default:
          return <ComponentOne />;
      }
    })()}
  </ReactSVGPanZoom>
);

方法三：用对象映射替代switch（更简洁） #

如果你的条件是简单的键值对应，用对象映射会比switch更清爽：

function YourParentComponent(props) {
  // 建立props值和组件的映射关系
  const componentMap = {
    '1': <ComponentOne />,
    '2': <ComponentTwo />,
    '3': <ComponentThree />,
    '4': <ComponentFour />
  };

  return (
    <ReactSVGPanZoom>
      {/* 从映射中取组件，找不到就用默认的ComponentOne */}
      {componentMap[props.Selected] || <ComponentOne />}
    </ReactSVGPanZoom>
  );
}

核心原因就是JSX的{}只接受表达式（能返回值的代码片段），而switch是控制流语句，不能直接放在里面。上面的几种方法都是把switch转换成一个返回组件的表达式，这样就能在JSX里正常使用啦～

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