如何在React组件的Switch语句中优雅集成show属性

首先修正原代码的一处小问题：组件参数中写的type需改为variant，与Props定义保持一致。

下面提供几种优雅的实现方案：

方案一：前置show判断，简化后续逻辑 #

直接在组件开头判断show状态，若为false则直接返回null，后续逻辑只需处理显示场景，结构清晰直观：

type Props = {
  variant: 'type-one' | 'type-two' | 'type-three';
  show: boolean;
};

const Placeholder = ({ variant, show }: Props) => {
  if (!show) return null;

  switch (variant) {
    case 'type-one':
      return <div id="type-one" className="type-one" />;
    case 'type-two':
      return <div id="type-two" className="type-two" />;
    case 'type-three':
      return <div id="type-three" className="type-three" />;
    default:
      return null;
  }
};

export default Placeholder;

方案二：对象映射替代switch，更易扩展 #

将不同variant对应的元素存入对象，替代switch语句，代码更简洁，后续新增变体只需在对象中添加对应项即可：

type Props = {
  variant: 'type-one' | 'type-two' | 'type-three';
  show: boolean;
};

const Placeholder = ({ variant, show }: Props) => {
  if (!show) return null;

  const variantElements = {
    'type-one': <div id="type-one" className="type-one" />,
    'type-two': <div id="type-two" className="type-two" />,
    'type-three': <div id="type-three" className="type-three" />
  };

  return variantElements[variant] || null;
};

export default Placeholder;

方案三：内联条件渲染（适合变体较少的场景） #

若不想拆分逻辑，可直接在每个变体的返回语句中加入show判断，缺点是代码冗余度略高：

type Props = {
  variant: 'type-one' | 'type-two' | 'type-three';
  show: boolean;
};

const Placeholder = ({ variant, show }: Props) => {
  switch (variant) {
    case 'type-one':
      return show ? <div id="type-one" className="type-one" /> : null;
    case 'type-two':
      return show ? <div id="type-two" className="type-two" /> : null;
    case 'type-three':
      return show ? <div id="type-three" className="type-three" /> : null;
    default:
      return null;
  }
};

export default Placeholder;

优先推荐前两种方案，尤其是方案二，在代码简洁性和可维护性上表现更优。

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