如何用React和Flow创建返回不同Prop类型组件的工厂函数？

一、工厂函数的返回类型定义 #

在Flow中，React组件的类型为React.ComponentType<Props>，你可以通过映射类型或条件类型精确约束工厂函数的返回类型，让Flow能正确推断组件的props匹配规则。

1. 定义组件映射关系 #

先创建一个映射类型，将SupportedFruits的每个枚举值与对应组件的类型绑定：

import * as React from 'react';

type AppleComponentProps = {
  id: SomeIDType,
  name: string
};

component AppleComponent(props: AppleComponentProps) {
  if (!props.id || !props.name) throw new Error('Missing required props');
  
  return (
    <SomeOtherComponent>
      {props.id}
      {props.name}
    </SomeOtherComponent>
  );
}

type OrangeComponentProps = {
  address: SomeOtherType
};

component OrangeComponent(props: OrangeComponentProps) {
  if (!props.address) throw new Error('Missing required props');

  return (
    <SomeOtherComponent>
      {props.address}
    </SomeOtherComponent>
  );
}

type SupportedFruits = 'apple' | 'orange' | 'default';

// 绑定水果类型与对应组件类型
type FruitComponentMap = {
  apple: React.ComponentType<AppleComponentProps>,
  orange: React.ComponentType<OrangeComponentProps>,
  default: null,
};

2. 为工厂函数指定返回类型 #

有两种方式实现精确的类型推断：

// 方式1：使用$ElementType提取映射类型的对应值
export const componentFactory = (fruit: SupportedFruits): $ElementType<FruitComponentMap, typeof fruit> => {
  switch (fruit) {
    case 'apple':
      return AppleComponent;
    case 'orange':
      return OrangeComponent;
    case 'default':
    default:
      return null;
  }
};

// 方式2：使用条件类型直观分支推断
type ComponentFactoryReturn<T: SupportedFruits> =
  T extends 'apple' ? React.ComponentType<AppleComponentProps> :
  T extends 'orange' ? React.ComponentType<OrangeComponentProps> :
  null;

export const componentFactory = <T: SupportedFruits>(fruit: T): ComponentFactoryReturn<T> => {
  switch (fruit) {
    case 'apple':
      return AppleComponent;
    case 'orange':
      return OrangeComponent;
    case 'default':
    default:
      return null;
  }
};

3. 优化调用组件的类型检查 #

为FruitConsumer的props定义联合类型，确保传入的props与选中组件匹配：

type FruitConsumerProps =
  | ({ fruit: 'apple' } & AppleComponentProps)
  | ({ fruit: 'orange' } & OrangeComponentProps)
  | { fruit: 'default' };

component FruitConsumer(props: FruitConsumerProps) {
  const FruitComponent = componentFactory(props.fruit);

  return (
    <SomeWrapperComponent>
      {/* 增加空值判断，避免渲染null */}
      {FruitComponent && <FruitComponent {...props} />}
    </SomeWrapperComponent>
  );
}

二、替代实现模式 #

如果工厂函数不是必需的，可根据场景选择以下更简洁的方案：

1. 直接条件渲染 #

组件数量较少时，直接在消费组件中用条件判断渲染，逻辑更直观：

component FruitConsumer(props: FruitConsumerProps) {
  return (
    <SomeWrapperComponent>
      {props.fruit === 'apple' && <AppleComponent {...props} />}
      {props.fruit === 'orange' && <OrangeComponent {...props} />}
      {props.fruit === 'default' && null}
    </SomeWrapperComponent>
  );
}

2. 对象映射注册 #

将组件存入映射对象，通过key直接获取，比switch语句更易维护（新增组件只需添加映射项）：

const fruitComponents: FruitComponentMap = {
  apple: AppleComponent,
  orange: OrangeComponent,
  default: null,
};

export const componentFactory = (fruit: SupportedFruits) => fruitComponents[fruit];

3. 高阶组件（HOC）统一增强逻辑 #

如果需要给所有水果组件添加统一逻辑（如props校验、日志），可以用HOC包裹：

const withFruitEnhance = <P>(Component: React.ComponentType<P>) => (props: P & { fruit: SupportedFruits }) => {
  // 统一props校验
  if (props.fruit === 'apple' && (!props.id || !props.name)) {
    throw new Error('Apple component missing required props');
  }
  if (props.fruit === 'orange' && !props.address) {
    throw new Error('Orange component missing required props');
  }
  
  return <Component {...props} />;
};

// 包裹目标组件
const EnhancedApple = withFruitEnhance(AppleComponent);
const EnhancedOrange = withFruitEnhance(OrangeComponent);

// 消费组件中使用
component FruitConsumer(props: FruitConsumerProps) {
  switch(props.fruit) {
    case 'apple': return <EnhancedApple {...props} />;
    case 'orange': return <EnhancedOrange {...props} />;
    default: return null;
  }
}

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