TypeScript 多态组件类型定义失效问题求助

问题核心 #

你遇到的问题是未正确处理多态组件的类型映射，导致as属性无法自动推断目标标签的原生Props，同时Framer Motion包装后类型推断失效。

优化后的组件实现 #

以下是兼顾类型安全、原生Props自动推断和Framer Motion兼容的最终方案：

import React, { ComponentProps, ElementType, forwardRef } from 'react';

// 定义组件Props：支持自定义渲染标签，继承目标元素的原生属性
type TextProps<T extends ElementType = 'span'> = {
  as?: T;
  // 自定义属性示例
  className?: string;
} & ComponentProps<T>;

const Text = forwardRef<HTMLElement, TextProps>(({ as: Component = 'span', ...props }, ref) => {
  return <Component ref={ref} {...props} />;
});

Text.displayName = 'Text';

export default Text;

功能验证 #

1. 指定HTML标签时自动推断Props：

// button的onClick类型自动匹配React.MouseEventHandler<HTMLButtonElement>
<Text as="button" onClick={(e) => console.log(e.target)}>
  点击我
</Text>

// div的style属性类型完全符合HTMLDivElement标准
<Text as="div" style={{ padding: '1rem', color: '#333' }}>
  容器文本
</Text>

2. Framer Motion兼容：

import { motion } from 'framer-motion';

// 用motion包装后，as属性仍能正确推断标签类型，同时支持所有动画Props
const MotionText = motion(Text);

<MotionText 
  as="h1" 
  animate={{ opacity: 1, y: 0 }} 
  initial={{ opacity: 0, y: -20 }}
  transition={{ duration: 0.3 }}
>
  动画标题
</MotionText>

关键优化点 #

• 用ElementType约束as属性，覆盖所有HTML标签和自定义组件
• 通过ComponentProps<T>继承目标元素的原生Props，实现类型自动推导
• 使用forwardRef处理ref传递，保持组件的完整性
• 默认渲染span，保证无as属性时的基础行为

内容的提问来源于stack exchange，提问作者nas.engineer