React使用cloneElement时Option组件缺Props的TypeScript类型错误如何解决

解决方案 #

报错的核心原因是 TypeScript 无法感知你会在 Select 组件内部通过 cloneElement 给 Option 注入 setSelectedInSelect 属性，所以在你直接调用 <Option> 时，会强制要求你传入所有定义为必填的 OptionProps 参数。

你可以通过以下两种常用方式解决：

方案1：将注入属性标记为可选（最简便）

修改 OptionProps 定义，把由父组件内部注入的属性设为可选：

type OptionProps = {
  // 该属性由Select内部通过cloneElement注入，调用时无需手动传入，标记为可选
  setSelectedInSelect?: Dispatch<SetStateAction<string>>;
  setSelectedInWrapper: Dispatch<SetStateAction<string>>;
  fruit: string;
};

因为你确定运行时 cloneElement 一定会传入该属性，所以在 Option 组件内部使用时加非空断言即可：

onClick={() => {
  setSelectedInSelect!(fruit);
  setSelectedInWrapper(fruit);
}}

方案2：约束Select的children类型（更严谨）

为了避免后续往 Select 内传入无关组件导致运行时报错，可以同时给 SelectProps 加类型约束：

type SelectProps = {
  children: ReactElement<OptionProps> | ReactElement<OptionProps>[];
};

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