如何定义可捕获返回元素Props类型的React RenderProps TS类型？

你的问题出在泛型参数的约束方向上：原类型中<P, T extends ReactElement<P>>把T定义为调用方可以指定的任意子类型，但你传入的render函数返回的是固定的Element类型，无法匹配所有可能的T，因此触发类型不兼容错误。

正确的通用类型定义 #

不需要单独声明T泛型，直接让render函数返回绑定了P的React元素类型即可：

import type { ReactElement } from 'react';

type ParentType = {
  render?: <P>(props: P) => ReactElement<P>;
};

针对特定组件的Props绑定（可选） #

如果需要明确绑定某个子组件的Props类型，可以结合ComponentProps工具类型：

import type { ReactElement, ComponentProps } from 'react';
import Child from './Child';

// 直接绑定Child组件的Props类型
type ParentType = {
  render?: (props: ComponentProps<typeof Child>) => ReactElement<ComponentProps<typeof Child>>;
};

使用示例 #

调整类型后，你的用法就能正常工作：

<Parent render={(p) => <Child {...p} />} />

此时TypeScript会自动推断p的类型为Child组件的Props类型，同时确保返回的元素使用了该Props类型，完全符合你的需求。

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