SuperAPI AI 工具集

polymorphic-component

前端与建站

查看项目

更新于 10-15 22:19

技能介绍

用途:实现 React 多态组件的 as 属性模式,提供完整的 TypeScript 类型安全,包括按元素正确推断 HTML 属性、可用的 ref 类型,以及避免属性泄漏。该技能跳过基础内容,只处理真正棘手的部分。

主要能力:先做需求发现(是否需要 ref 转发、自有属性是否与原生 HTML 属性冲突、as 省略时的默认元素、as 是否接受自定义组件);核心类型方案基于 React.ComponentPropsWithoutRef<T>,配合 AsProp、PropsToOmit、PolymorphicComponentProps 等工具类型,用 Omit 剥离与自有属性冲突的原生属性;提供无 ref 转发与有 ref 转发两种完整实现模式,后者需用类型断言恢复自由泛型。

使用方式:将共享工具类型放在独立的 types/polymorphic.ts 中,不要逐组件内联;按发现结果选择是否使用 forwardRef;输出可直接复制粘贴的实现,并附至少一个合法的 as 替换示例和一个应报 TS 错误的示例。

适用场景:需要 as 属性且要求类型推断准确的 React 组件库或设计系统。

限制与注意:React.forwardRef 本身不支持自由泛型,末尾类型断言不可避免;渲染内 as 的断言源于 TS 对泛型条件类型的已知限制;默认元素必须在泛型默认值和运行时回退两处保持一致;rest 中不得包含 as,需显式解构;若自有 children 类型不同需加入 PropsToOmit;styled-components/Emotion 自带 as 会冲突,应改名 renderAs;断言后 displayName 需显式设置。