如何正确定义接收Wrapper组件作为Props的React组件类型？

一、替换ReactNode为正确类型 #

错误原因是ReactNode用于描述可渲染的内容（比如JSX元素、文本、null等），而你需要的是组件类型——即能接收props并返回ReactNode的函数/类。正确的类型是React.ComponentType，它涵盖了函数组件和类组件，还可以指定组件接收的props类型。

代码修正： #

import React from 'react';

type HeaderProps = {
  // 指定Wrapper接收children props，和你的SomeWrapper匹配
  Wrapper: React.ComponentType<{ children: React.ReactNode }>;
};

const Header = ({ Wrapper }: HeaderProps) => {
  return (
    <Wrapper>
      <button>click me</button>
    </Wrapper>
  );
};

如果你的Wrapper需要额外props（比如第二个使用方式里的other），可以扩展类型：

type WrapperProps = {
  children: React.ReactNode;
  other?: string; // 根据实际需求定义具体类型
};

type HeaderProps = {
  Wrapper: React.ComponentType<WrapperProps>;
};

这样两种使用方式都能正常通过类型检查：

// 直接传组件
<Header Wrapper={SomeWrapper} />

// 传匿名组件（带额外props）
<Header Wrapper={(props) => <SomeWrapper {...props} other="extra" />} />

二、其他实现方案 #

除了直接传组件作为props，还有两种常用方式：

1. Render Props模式 #

通过传递一个函数，让Header把内部内容传给这个函数，由函数负责包裹：

type HeaderProps = {
  renderWrapper: (children: React.ReactNode) => React.ReactNode;
};

const Header = ({ renderWrapper }: HeaderProps) => {
  return renderWrapper(<button>click me</button>);
};

使用方式：

<Header renderWrapper={(children) => (
  <SomeWrapper other="extra">{children}</SomeWrapper>
)} />

2. 高阶组件（HOC） #

如果需要复用“给组件加Wrapper”的逻辑，可以用高阶组件封装：

const withWrapper = <P extends object>(Wrapper: React.ComponentType) => {
  return (Component: React.ComponentType<P>) => {
    return (props: P) => {
      return <Wrapper><Component {...props} /></Wrapper>;
    };
  };
};

// 使用：给Header加上SomeWrapper
const WrappedHeader = withWrapper(SomeWrapper)(Header);

// 直接渲染WrappedHeader即可
<WrappedHeader />

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