如何在JSX中动态切换React组件并避免重复传递相同属性

核心思路是先确定要渲染的目标组件，再统一传入一次属性，完全不需要重复写两遍属性列表，和原有逻辑完全等价，没有额外性能开销。

可落地实现方案 #

方案1：声明动态组件后统一传参（可读性最高、最常用） #

JSX 支持将组件本身赋值给大写开头的变量，渲染时直接使用该变量作为标签名即可，所有属性只需要写一次：

// 注意这里赋值的是组件本身，不是带<>的已渲染组件实例
const TargetComponent = isSomeBoolTrue ? OriginalComponent : NewComponent;

// 所有属性统一传入，无重复代码
return <TargetComponent a={a} b={b} c={c} /* 其余属性按需编写 */ z={z} />;

如果属性已经整理为对象，还可以用展开运算符进一步简化，无需逐个书写属性名：

const sharedProps = { a, b, c, /* 其余透传属性 */ z };
const TargetComponent = isSomeBoolTrue ? OriginalComponent : NewComponent;
return <TargetComponent {...sharedProps} />;

方案2：使用React原生createElement方法（无需额外声明变量） #

如果不想额外声明组件变量，可以直接调用React元素创建方法，第一个参数传入动态判断得到的组件，第二个参数统一传入属性对象，彻底消除重复代码：

return React.createElement(
  isSomeBoolTrue ? OriginalComponent : NewComponent,
  { a, b, c, /* 所有需要透传的属性 */ z }
);

注意事项 #

• 你示例里写的期望写法(isSomeBoolTrue ? (<OriginalComponent):(<NewComponent) a={a}...不符合JSX语法规范，JSX不支持在标签声明中途拆分组件名和属性，必须先确定组件类型再传参。
• 动态赋值的组件变量必须用大写开头：JSX解析规则为小写开头的标签会被识别为原生HTML元素，大写开头的才会被识别为自定义React组件。
• 不要给变量赋值带<>的组件实例（比如const Comp = isXxx ? <Original /> : <New />），这种写法得到的是已经渲染完成的React元素，无法后续传入属性。

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