TypeScript中如何定义可接收HTML标签或React组件的Props？解决TS2604错误

嘿，我来帮你搞定这个TypeScript类型错误！你遇到的TS2604错误，核心原因是类型定义不匹配——你用了HTMLElement来表示React组件，但这完全不是一回事儿。

错误原因拆解 #

你之前写的component: string | HTMLElement有个关键问题：

• HTMLElement是浏览器里真实DOM元素的类型（比如你用document.getElementById拿到的节点），但我们在JSX中使用的组件/标签名，是可以被React渲染的组件类型，不是已经生成的DOM元素。
• TypeScript看到HTMLElement类型时，会认为它不是一个可以被<Component />这样调用/实例化的东西，所以就抛出了“没有构造或调用签名”的错误。

正确的类型方案：用React内置的ElementType #

React专门提供了一个内置类型ElementType，它完美涵盖了你需要的两种场景：

• 所有HTML标签名（比如"div"、"svg"这类字符串）
• 所有React组件（函数式组件、类组件都包含在内）

修改后的完整代码 #

import React, { PureComponent, type ElementType, type ReactNode } from 'react';

// 正确定义Props类型
export interface MyProps {
  component: ElementType;
  children?: ReactNode; // 建议加上children类型，因为你在组件里用到了它
}

interface State {}

class MyComponent extends PureComponent<MyProps, State> {
  render() {
    const Component = this.props.component;
    // 这里的Component现在会被TypeScript正确识别为可渲染的组件/标签
    return <Component>{this.props.children}</Component>;
  }
}

// 你的两个使用示例都能正常通过类型检查啦
<MyComponent component={({ children }) => children} />
<MyComponent component="div" />

额外说明 #

如果你需要给组件传递特定的props（比如给div传递className，给自定义组件传递特定属性），可以进一步用ElementType结合泛型来约束，但目前你的场景用基础的ElementType就足够了。

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