React中如何动态传递变量作为组件prop名避免冗余代码

问题背景 #

现有React组件MyComponent，原生支持通过独立的布尔标识prop控制不同样式表现，比如通过<MyComponent isRed/>、<MyComponent isBlue />、<MyComponent isGreen />分别传入三种不同状态的组件。
目前希望根据运行时的变量值，动态给组件传递匹配的prop，之前尝试的两种方案都有明显缺陷：

• 统一传一个color类型的prop，比如<MyComponent color={isColor}/>，但这需要在MyComponent内部新增针对color取值的判断逻辑，改动原有组件的实现
• 写switch分支根据场景返回带不同prop的组件标签，会产生大量重复的组件声明代码，冗余度很高
  想知道有没有类似<MyComponent {isColor}/>的简洁实现方式，既不用写冗余分支，也不用修改原有组件的内部判断逻辑？

解决方案：利用JSX对象展开语法实现动态传参 #

这个场景完全可以用JSX原生的prop展开能力实现，不需要写一堆冗余的switch分支，核心思路是把不同取值对应的prop提前整理成映射配置，运行时根据变量取出对应配置后，直接展开传给组件即可，和你期望的写法逻辑完全一致。
具体实现步骤：

• 提前把不同颜色值和对应的prop配置做成一个静态映射表，这部分只需要在全局写一次即可，不需要重复维护
• 运行时根据当前的颜色变量值，从映射表里取出对应的prop配置对象
• 通过展开运算符{...}把这个对象直接传入MyComponent即可

实际代码示例：

// 全局一次性定义prop映射关系
const colorToPropMap = {
  red: { isRed: true },
  blue: { isBlue: true },
  green: { isGreen: true }
};

function DemoPage() {
  // 从组件状态、接口入参拿到当前需要的颜色值
  const targetColor = 'blue';

  return (
    <div>
      {/* 等价于手动编写 <MyComponent isBlue /> */}
      <MyComponent {...colorToPropMap[targetColor]} />
    </div>
  )
}

补充注意点 #

• 这种写法和手动硬编码写prop的运行效果完全一致，没有额外的性能损耗，也完全不需要改动原有MyComponent的内部实现逻辑
• 如果组件还需要传递其他固定prop，可以和展开语法混写，比如<MyComponent {...colorToPropMap[targetColor]} size="large" onClick={handleClick} />，React会自动合并所有传入的props；如果展开的prop和单独写的prop重名，后面写的prop会覆盖展开的默认值，灵活性很高
• 如果存在取不到匹配颜色的兜底场景，可以给映射取值加个空对象兜底，避免传入undefined导致的运行报错，比如：

  <MyComponent {...(colorToPropMap[targetColor] ?? {})} />
  

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