React+TypeScript中如何实现条件式自定义包装组件？

你的代码问题在于：ConditionalWrapper作为函数组件直接返回了组件类型（Wrapper1/Wrapper2），而非渲染后的JSX元素；同时TypeScript会因两个组件的props类型不一致（尤其是children类型差异）抛出类型错误。以下是几种最优解决方案：

方案1：直接在使用处条件选择组件（最简洁） #

无需额外封装，直接在目标组件内根据条件选择Wrapper类型，再渲染并传递子元素：

import { SomeCustomWrapperComponent, AnotherCustomWrapperComponent } from './path/to/components';

const Component = () => {
  // 根据条件选中目标Wrapper组件类型
  const ActiveWrapper = condition ? SomeCustomWrapperComponent : AnotherCustomWrapperComponent;

  return (
    <ActiveWrapper>
      {/* 子元素内容 */}
      <div>Hello World</div>
    </ActiveWrapper>
  );
};

处理TypeScript类型兼容问题 #

如果两个Wrapper的children类型不同（比如一个接受React.ReactNode，另一个仅接受string），可以：

• 传递两者都兼容的类型（比如string同时满足React.ReactNode和string要求）
• 若无法直接兼容，使用类型断言：

  // 假设Wrapper1接受number类型children，Wrapper2接受string类型
  <ActiveWrapper>{123 as unknown as string}</ActiveWrapper>
  

方案2：封装复用性条件Wrapper组件 #

当条件逻辑需要在多个地方复用时，封装ConditionalWrapper组件，明确处理公共props并解决类型问题：

import { SomeCustomWrapperComponent, AnotherCustomWrapperComponent } from './path/to/components';
import type { ComponentProps } from 'react';

// 提取两个Wrapper的公共props类型，确保至少包含children
type ConditionalWrapperProps = {
  children: React.ReactNode; // 或取两个Wrapper children类型的交集
} & Omit<ComponentProps<typeof SomeCustomWrapperComponent> & ComponentProps<typeof AnotherCustomWrapperComponent>, 'children'>;

const ConditionalWrapper = (props: ConditionalWrapperProps) => {
  if (condition) {
    return <SomeCustomWrapperComponent {...props} />;
  }
  return <AnotherCustomWrapperComponent {...props} />;
};

// 使用示例
const Component = () => {
  return (
    <ConditionalWrapper>
      {/* 子元素内容 */}
    </ConditionalWrapper>
  );
};

方案3：类型工具统一props类型 #

如果两个Wrapper的props差异较大，用TypeScript类型工具强制约束公共props：

import type { ComponentProps, ElementType } from 'react';

// 定义公共props类型
type CommonWrapperProps = {
  children: React.ReactNode;
  // 其他需要传递的公共props
};

// 条件选择组件并约束为符合公共props的类型
const getActiveWrapper = (): ElementType<CommonWrapperProps> => {
  return condition ? SomeCustomWrapperComponent : AnotherCustomWrapperComponent;
};

const Component = () => {
  const ActiveWrapper = getActiveWrapper();
  return <ActiveWrapper>子元素</ActiveWrapper>;
};

总结 #

• 优先使用方案1，代码简洁直观，无额外封装成本；
• 需要复用条件逻辑时选择方案2，明确处理类型兼容性；
• 复杂类型场景下使用方案3，通过类型工具约束组件的公共props。

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