如何让TypeScript识别React.cloneElement传递给子组件的Props？

好问题！咱们可以通过TypeScript的类型约束来解决这个问题——既要让GatherChild明确要求page是必填属性，又要让TypeScript知道Gather组件会自动为子组件注入这个属性，避免直接使用GatherChild时出现遗漏，同时在Gather内部使用时不会报错。

步骤1：给GatherChild定义严格的Props类型 #

首先，我们要明确GatherChild的page属性是必填的，这样外部直接使用它时，TypeScript会立刻提示错误：

// GatherChild.tsx
import React from 'react';

// 明确定义props类型，page为必填number类型
interface GatherChildProps {
  page: number;
}

const GatherChild = ({ page }: GatherChildProps) => {
  return <div>{page}</div>;
};

export default GatherChild;

步骤2：约束Gather组件的子元素类型 #

接下来，我们要给Gather组件定义类型，让它只接受那些需要page属性的子组件，同时告诉TypeScript：这个组件会为子元素注入page属性，所以在Gather内部使用这些子组件时，不需要显式传递page。

修改Gather.tsx的类型定义：

// Gather.tsx
import React from 'react';

// 定义一个类型，代表"需要page属性的组件Props"
type RequiresPageProp = { page: number };

// Gather的Props类型：子元素必须是单个或多个需要page属性的组件实例
interface GatherProps {
  children: React.ReactElement<RequiresPageProp> | React.ReactElement<RequiresPageProp>[];
}

const Gather: React.FC<GatherProps> = ({ children }) => {
  return React.Children.map(children, (child, index) => {
    // 这里cloneElement时注入page，TypeScript会自动校验类型匹配
    return React.cloneElement(child, { page: index + 1 });
  });
};

export default Gather;

步骤3：验证效果 #

现在我们来测试两种场景：

• 直接使用GatherChild：比如写<GatherChild />，TypeScript会立刻报错，提示缺少必填的page属性，完美避免了遗漏。
• 通过Gather使用GatherChild：像你原来的App.tsx代码那样，把GatherChild放在Gather内部，TypeScript会知道Gather会自动注入page，所以不会报错，同时GatherChild内部的page也能被TypeScript确认为number类型，不会有undefined的风险。

额外优化：支持带其他Props的子组件 #

如果你的GatherChild还有其他自定义属性，上面的写法依然适用，因为React.ReactElement<RequiresPageProp>会兼容包含page的其他Props类型。比如如果GatherChild有title属性：

interface GatherChildProps {
  page: number;
  title: string;
}

// 在Gather里使用时：
<Gather>
  <GatherChild title="页面1" />
  <GatherChild title="页面2" />
</Gather>

TypeScript依然会正常工作，既要求你传递title，又知道Gather会补上page。

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