如何在TypeScript中使用React复合组件并正确传递Props？

你当前的问题是，想用复合组件模式让父组件批量给子组件传递Props，但TypeScript编译报错——因为子组件的必填Props没显式写在JSX里，TypeScript无法识别父组件会通过cloneElement自动传递这些Props，同时你不想用any放弃类型检查，下面是可行的解决思路：

核心优化方向 #

• 用泛型约束父组件的Props类型，确保传递的Props能被所有子组件兼容
• 限制父组件的children必须是能接收该泛型Props的React元素，让TypeScript提前做类型校验
• 移除any类型，全程保留TypeScript的编译时检查优势

修改后的完整代码 #

import { Children, cloneElement, ReactElement } from 'react';

// 用泛型T约束父组件要传递的Props类型
type ParentComponentProps<T> = {
  props: T;
  // 限制children必须是能接收T类型Props的React元素
  children: ReactElement<T> | ReactElement<T>[];
};

const ParentComponent = <T extends {}>({ children, props }: ParentComponentProps<T>) => {
  return (
    <>
      {Children.map(children, (child) => {
        if (!child || typeof child === 'string') {
          return child;
        }
        // 这里cloneElement的类型会被正确推断，不会丢失类型检查
        return cloneElement(child, props);
      })}
    </>
  );
};

type Child1Props = {
  name: string;
};

const Child1 = ({ name }: Child1Props) => {
  return <div>Child 1: {name}</div>;
};

type Child2Props = {
  name: string;
};

const Child2 = ({ name }: Child2Props) => {
  return <div>Child 2: {name}</div>;
};

export default function Homepage() {
  // TypeScript会自动检查props是否符合所有子组件的要求
  // 如果传的props缺少name或者类型不对，会直接在编译阶段报错
  return (
    <ParentComponent props={{ name: 'Bob' }}>
      <Child1 />
      <Child2 />
    </ParentComponent>
  );
}

关键细节说明 #

1. 泛型约束：<T extends {}>确保T是符合React Props结构的对象类型。父组件的props字段类型设为T，children被限制为只能接受T类型Props的React元素，这样TypeScript能提前校验子组件是否兼容要传递的Props。
2. 自动类型推断：在Homepage中使用时，TypeScript会自动推断出T是{name: string}——因为所有子组件的Props都要求name: string，如果传递的Props不符合这个类型（比如少传name、传number类型），会立刻报错。
3. 移除any类型：原来的props: any完全放弃了类型检查，现在用泛型既保留了TypeScript的编译时校验，又实现了批量传Props的需求。

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