如何理解React类型定义中‘JSXElementConstructor<any> = string’的含义？

安全阿岳

2026-8-18

ReactElement 与 JSXElementConstructor 类型解析

一、ReactElement 泛型参数说明

先看ReactElement的完整定义：

interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
    type: T;
    props: P;
    key: Key | null;
}

你可能误读了泛型部分，这里不是JSXElementConstructor<any> = string，而是对泛型参数T做了约束+默认值：

T extends string | JSXElementConstructor<any>：限定T只能是两种类型的联合：string（对应原生HTML标签）或JSXElementConstructor<any>（对应自定义组件）。
= string | JSXElementConstructor<any>：给T设置默认类型，当你不显式指定T时，就用这个联合类型。

举个实际场景：

写<div>时，type是字符串"div"，对应T的string类型。
写<MyComponent>时，type是你的自定义组件（函数或类），对应T的JSXElementConstructor<any>类型。

二、JSXElementConstructor 类型含义

JSXElementConstructor是一个联合类型，定义了「能生成React元素的组件构造器」：

type JSXElementConstructor<P> =
    | ((props: P) => ReactElement<any, any> | null)
    | (new (props: P) => Component<any, any>);

它包含两种合法的组件类型：

函数组件：接受props参数，返回ReactElement或null的函数。比如：
```
const MyFuncComponent = (props: { text: string }) => <div>{props.text}</div>;
```
这个函数就符合JSXElementConstructor<{ text: string }>类型。
类组件构造函数：可以用new关键字实例化的构造函数，接受props参数，返回Component实例。比如：
```
class MyClassComponent extends React.Component<{ text: string }> {
  render() { return <div>{this.props.text}</div>; }
}
```
这个类的构造函数就符合JSXElementConstructor<{ text: string }>类型。