React TypeScript动态组件报错：className属性不存在于IntrinsicAttributes

你遇到的问题核心是组件类型约束没有匹配不同component参数的属性要求，尤其是当component可以是任意ComponentType时，TypeScript无法确定它是否接受className、ref等属性。下面一步步帮你修复：

问题根源拆解 #

1. ReactChildren类型误用：ReactChildren是React内部用于处理子元素的工具类型，不是定义children属性的正确类型，官方推荐用React.ReactNode。
2. component类型无约束：当前string | ComponentType的类型太宽泛，TypeScript无法推断自定义组件是否接受className和ref属性。
3. forwardRef泛型不匹配：固定HTMLElement作为ref类型，无法匹配非DOM元素组件的ref情况，需要用泛型动态关联。

修复后的代码 #

import React, { ReactNode, ComponentType, forwardRef } from "react";

// 定义所有组件共享的基础属性
interface BaseProps {
  children?: ReactNode;
  className?: string;
  // 允许传入HTML标签名或自定义组件
  component?: ComponentType<any> | keyof JSX.IntrinsicElements;
}

// 用泛型让ref类型与component的元素类型动态关联
type MyComponentProps<T extends HTMLElement = HTMLDivElement> = BaseProps & {
  component?: ComponentType<BaseProps & { ref?: React.Ref<T> }> | keyof JSX.IntrinsicElements;
};

const MyComponent = forwardRef(function <T extends HTMLElement = HTMLDivElement>(
  props: MyComponentProps<T>,
  ref: React.Ref<T>
) {
  const { children, className, component: Component = "div", ...otherProps } = props;
  
  return (
    <Component className={className} ref={ref} {...otherProps}>
      {children}
    </Component>
  );
});

export default MyComponent;

关键改动说明 #

• 替换ReactChildren为ReactNode：这是React官方认可的children属性类型，能覆盖所有合法的子元素（比如单个元素、文本、元素数组等）。
• 泛型化组件：通过泛型T让ref类型和component的元素类型自动匹配，比如当你传入component="span"时，ref会自动对应HTMLSpanElement类型。
• 约束component的属性：明确component无论是HTML标签还是自定义组件，都接受className、ref和children属性，直接解决TypeScript的“属性不存在”错误。
• 简化默认值：在解构时直接给Component设置默认值"div"，省去单独写defaultProps的麻烦（如果习惯用defaultProps也可以保留，二者兼容）。

额外优化建议 #

如果你的组件只需要支持HTML标签（不需要自定义组件），可以进一步简化类型：

import React, { ReactNode, forwardRef } from "react";

interface MyComponentProps {
  children?: ReactNode;
  className?: string;
  component?: keyof JSX.IntrinsicElements;
}

const MyComponent = forwardRef<HTMLElement, MyComponentProps>((props, ref) => {
  const { component: Component = "div", ...rest } = props;
  return <Component ref={ref} {...rest} />;
});

export default MyComponent;

这种情况下TypeScript能自动推断所有HTML标签的属性，不会再出现类型错误。

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