React.ComponentType 类型使用

React.ComponentType 是 React 在 TypeScript 类型定义中的一个通用组件类型类型别名 ，它的作用是用来表示任何合法的 React 组件类型（无论是函数组件还是类组件）。

1. 定义

在 React 的类型声明文件（@types/react）中，ComponentType 是这样定义的：

ts 复制代码

type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;

也就是说：

P 代表组件的 props 类型（默认为 {}）。
React.ComponentType<P> 是 React.ComponentClass<P> 或 React.FunctionComponent<P> 的联合类型。因此它既可以表示:
函数组件
类组件

2. 使用场景

（1）作为泛型参数接收一个不限定组件类型的参数

当你想写一个高阶组件 (HOC) ，但它既能接收函数组件也能接收类组件时，可以用 ComponentType 来表示传入的组件类型：

ts 复制代码

import React from 'react';

function withTitle<P>(Component: React.ComponentType<P>) {
  return (props: P) => {
    return (
      <div>
        <h1>标题</h1>
        <Component {...props} />
      </div>
    );
  };
}

这里的 Component 可能是：

ts 复制代码

const Hello: React.FC<{ name: string }> = ({ name }) => <div>Hello {name}</div>;
class World extends React.Component<{ name: string }> {
  render() {
    return <div>World {this.props.name}</div>;
  }
}

const HelloWithTitle = withTitle(Hello);
const WorldWithTitle = withTitle(World);

2）做组件工厂或动态渲染

如果你需要一个函数来接收一个组件类型并进行动态渲染，可以用 ComponentType 做参数类型：

ts 复制代码

function renderComponent<P>(Component: React.ComponentType<P>, props: P) {
  return <Component {...props} />;
}

用法：

ts 复制代码

renderComponent(Hello, { name: 'Alice' });
renderComponent(World, { name: 'Bob' });

3. 对比其他类型

类型	说明	使用场景
`React.FC<P>`	仅能表示函数组件	适合明确组件就是函数组件
`React.ComponentClass<P>`	仅能表示类组件	适合明确组件就是类组件
`React.ComponentType<P>`	同时表示类组件和函数组件（`FC` 或 `ComponentClass` 的联合类型）	想写通用的组件接收器（如 HOC）时

✅ 总结： React.ComponentType<P> 用于表示 "任意类型的 React 组件" （泛化到函数组件 + 类组件），尤其适合在 高阶组件（HOC） 、组件工厂 、动态组件渲染 等需要支持多种组件写法的场景中使用。