reactjs - 使用变量类型反应 Typescript 组件（来自道具）

Question

我想创建一个从 props 和 children 接受其类型（例如'div'、'span'）并呈现它们的组件，该组件还支持 ref 转发和 className prop。

问题是我遇到了一个错误'className' does not exist on type 'IntrinsicAttributes，并且无法弄清楚是什么原因造成的。

我尝试将我提供的类型更改为forwardRef不同HTMLElement的类型，搜索类似的组件，但它没有什么帮助。

HTMLElement例如，当我更改为 时HTMLDivElement，更改<Component ...>为此<div ...>错误消失。所以问题可能是错误的类型（HTMLElement）

这是组件代码：

import React, { ReactChildren, ComponentType } from "react"

interface MyComponentProps {
  children: ReactChildren
  component: string | ComponentType
  className: string
}

const MyComponent = React.forwardRef<HTMLElement, MyComponentProps>(
  (props, ref) => {
    const { children, className, component: Component, ...otherProps } = props

    return (
      <Component className={className} ref={ref} {...otherProps}>
        {children}
      </Component>
    )
  },
)

MyComponent.defaultProps = {
  component: "div",
}

export default MyComponent

预期结果：没有 Typescript 错误。

实际结果：一行出现如下错误<Component className={className} ref={ref} {...otherProps}>

TS2322: Type '{ children: ReactChildren | (ReactChildren & string) | (ReactChildren & number) | (ReactChildren & false) | (ReactChildren & true) | (ReactChildren & ReactElement<any, string | ((props: any) => ReactElement<...> | null) | (new (props: any) => Component<...>)>) | (ReactChildren & ReactNodeArray) | (ReactChildren & Re...' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
  Property 'className' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.

标签： reactjstypescriptref