reactjs - React Typescript-komponent med variabel type (fra props)

Jeg vil lave en komponent, som accepterer sin type (f.eks. 'div', 'span') fra props og børn og renderer dem, komponenten understøtter også ref forwarding og className prop.

Problemet er, at jeg får en fejl 'className' findes ikke på typen 'IntrinsicAttributes', og jeg kan ikke finde ud af, hvad der forårsager det.

Jeg prøvede at ændre de typer, jeg giver til forwardRef fra HTMLElement til forskellige andre, søgte på lignende komponenter på Google, men det var til lidt hjælp.

Når jeg ændrer HTMLElement til for eksempel HTMLDivElement, og ændrer <Component ...> til <div ...>, forsvinder denne fejl. Så problemet er sandsynligvis forkert type (HTMLElement)

Her er komponentkoden:

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

Forventet resultat: ingen Typescript-fejl.

Faktisk resultat: følgende fejl vises på en linje <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; }'.

Relaterede artikler