React子组件中如何为传入的组件类型Props指定类型？

方案1：使用 React.ReactNode（最常用） #

如果你的 props 是已经渲染好的 JSX 元素（就像你示例里的 <Header/>），直接用 React.ReactNode 类型即可，它涵盖了所有能在 JSX 中渲染的内容（元素、字符串、数字、null/undefined 等），完全匹配你的场景。

修改后的 Layout 组件代码：

import React from 'react';

export default function Layout({ header, body }: { 
  header?: React.ReactNode; 
  body?: React.ReactNode 
}) {
  return (
    <div className="layout">
      {header}
      {body}
    </div>
  );
}

这里的 ? 表示这两个 props 是可选的，对应你在 App.tsx 里只传入 header 的情况。

方案2：使用 React.ComponentType（接收组件本身） #

如果你的需求是接收未渲染的组件，后续在 Layout 内部自行渲染并传递 props，就用 React.ComponentType，它兼容函数组件和类组件：

修改后的 Layout 组件代码：

import React from 'react';

export default function Layout({ Header, Body }: { 
  Header?: React.ComponentType; 
  Body?: React.ComponentType 
}) {
  return (
    <div className="layout">
      {Header && <Header />}
      {Body && <Body />}
    </div>
  );
}

此时 App.tsx 的调用方式要改成传递组件本身：

<Layout Header={Header} />

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