TypeScript中如何编写接收React组件及props并安全渲染的函数

问题原因 #

TypeScript 无法默认保证传入组件的 Props 兼容 children 属性，就算添加了 Props extends {children: React.ReactNode} 约束，也无法排除 Props 对 children 有更严格的子类型定义，直接注入子元素会触发类型不兼容报错。

修复后的实现 #

import * as React from "react";
import { render } from "@testing-library/react";

// 泛型约束传入组件的Props必须包含可选的children属性
function renderContainer<Props extends { children?: React.ReactNode }>(
  Container: React.ComponentType<Props>,
  // 调用时传入的props自动剔除children字段，避免和注入的子元素冲突
  props: Omit<Props, "children">
) {
  // 此处类型断言安全：我们手动补上了children属性，必然满足Props的完整约束
  return render(
    <Container {...(props as Props)}>
      <div>Child</div>
    </Container>
  );
}

type CustomComponentProps = {
  children?: React.ReactNode;
  prop1: number;
  prop2?: string;
};
const CustomComponent = ({ prop1, prop2, children }: CustomComponentProps) => (
  <div>{children}</div>
);

// 符合预期的调用效果
renderContainer(CustomComponent, { prop1: 1 }); // 类型校验通过
renderContainer(CustomComponent, { prop1: 1, prop2: "string" }); // 类型校验通过
renderContainer(CustomComponent, { prop3: 3 }); // 类型报错：不存在prop3属性

逻辑说明 #

• 泛型约束保证所有传入 renderContainer 的组件都支持可选的 children 属性，符合 React 组件的通用设计规范。
• 调用入参用 Omit<Props, 'children'> 剔除 children 字段，既避免用户手动传入 children 被覆盖的逻辑问题，也符合函数自动注入预设子元素的设计目的。
• 类型断言是安全的：我们已经手动为组件补上了符合约束的 children 属性，必然满足完整的 Props 类型要求。

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