TypeScript组件接口传参类型咨询：传入组件的声明是否合规？

你的写法不可行，核心问题是类型不匹配：

• 你在接口里把body声明为ComponentType，这个类型代表的是组件本身（比如函数组件/类组件的引用）；
• 但你实际传入的是<Form/>，这是已经渲染好的React元素实例，它的类型是React.ReactElement（或更宽泛的React.ReactNode）。

下面给两种符合需求的正确写法：

方案1：传入渲染好的React元素（对应你当前的使用方式） #

如果就是想直接把渲染好的内容传给MyComponent，把类型改成React.ReactElement或者更灵活的React.ReactNode（支持文本、多个元素、null等）：

import type { ReactNode } from 'react';

interface MyProps {
  body: ReactNode;
}

const MyComponent = ({ body }: MyProps) => (
  <div>{body}</div>
);

// 你的原使用方式完全兼容
const Main = () => (
  <MyComponent body={<Form/>}/>
);

方案2：传入组件本身（让MyComponent负责渲染） #

如果希望MyComponent能控制传入组件的渲染（比如给它加额外props），就保留ComponentType，但使用时要传入组件引用，而非渲染好的元素：

import type { ComponentType } from 'react';

interface MyProps {
  body: ComponentType;
}

const MyComponent = ({ body: Body }: MyProps) => (
  // 这里可以给Body加额外props，比如 <Body someProp="value" />
  <div><Body /></div>
);

// 使用时传入组件本身，不是<Form/>
const Main = () => (
  <MyComponent body={Form}/>
);

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