React TypeScript中JSX元素Component无构造/调用签名报错问题

• 你为Component参数定义的类型错误：ReactNode是已完成渲染的JSX节点/静态值的类型（比如<div>测试</div>、纯文本、null都属于ReactNode），它不是可调用的组件构造函数，不符合JSX语法中可被<Component />调用的类型要求，因此触发类型报错。

将Component的类型替换为React.ComponentType即可，该类型同时兼容类组件和函数组件，支持通过传入props渲染。如果需要对组件的props做类型约束，还可以为ComponentType添加泛型定义。

修正后的代码 #

// 基础通用写法，无props类型约束
import React, { ComponentType } from 'react';

const pageArea = (Component: ComponentType, title: string) => ({ ...props }) => {
  return (
    <>
      <div>
        { Component && <Component {...props} /> }
      </div>
    </>
  );
};

// 带props类型约束的写法，适配有固定props的组件
type PageProps = {
  id: number;
  name: string;
  // 可按需添加其他props字段
}

const pageAreaWithProps = (Component: ComponentType<PageProps>, title: string) => (props: PageProps) => {
  return (
    <>
      <div>
        { Component && <Component {...props} /> }
      </div>
    </>
  );
};

• 如果仅需要支持函数组件，也可以将类型定义为(props: any) => React.ReactNode，但ComponentType兼容性更强，无需额外判断组件类型。
• 如果允许Component参数传入空值，可将类型调整为ComponentType | undefined，匹配你代码中Component &&的判空逻辑。

内容的提问来源于stack exchange，提问作者Md Parvez Alam