如何让React+TypeScript的Forward组件仅传递子元素兼容的Props

我来帮你搞定这个问题！你遇到的"Rest types may only be created from object types"错误，核心原因是你的泛型P没有被约束为对象类型——TypeScript没法确定Partial<P>一定是可解构的对象（比如如果P是string或number类型，Partial<P>就不是对象），所以不允许用rest操作符提取...props。

修复步骤 #

我们只需要给泛型加上对象类型约束，再微调一下类型定义，就能完美实现你想要的"仅传递子元素兼容Props"的需求：

1. 约束泛型为对象类型
   在定义Forward组件时，给P加上extends object的约束，确保它只能是对象类型，这样Partial<P>就必然是可解构的对象了。

2. 优化Children类型定义
   你的组件支持多个子元素，所以把children的类型从React.ReactElement<P>改成React.ReactElement<P> | React.ReactElement<P>[]，让TypeScript能正确识别多个子元素的场景。

完整修正代码 #

import React from 'react';

// 约束P必须是对象类型，同时支持单个或多个子元素
type ForwardProps<P extends object> = Partial<P> & {
  children?: React.ReactElement<P> | React.ReactElement<P>[];
};

export function Forward<P extends object>({ children, ...props }: ForwardProps<P>) {
  const mapped = React.Children.map(children, child => {
    // 验证子元素是合法的React元素，且props类型匹配P
    if (React.isValidElement<P>(child)) {
      return React.cloneElement<P>(child, props);
    }
    return child;
  });

  return <>{mapped}</>;
}

// 使用示例：自动推断子元素<input>的Props类型
<Forward className="good-input">
  <input />
  <input />
  <input />
</Forward>

为什么这样有效？ #

• 泛型约束P extends object让TypeScript明确知道props是对象类型，解决了rest操作符的报错。
• 当你传入<input>作为子元素时，TypeScript会自动推断P为InputHTMLAttributes<HTMLInputElement>，这时候Forward只允许传递<input>支持的属性——如果你尝试传递一个不属于input的属性（比如foo="bar"），TypeScript会直接报错，完美实现你"仅传递兼容Props"的需求。
• 如果你的子元素是不同类型的组件（比如同时有<input>和<button>），TypeScript会自动推断P为两者Props的交集，只有共同支持的属性才能被传递，保证了类型安全。

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