React +TypeScript - 呈现动态元素问题的组件

Question

I feel like I'm pretty close but I can't take my compiler screaming at me anymore!

The problem seems to be arising with passing the ref, when div is in the as union.

When div is removed as a possible element to render, all my errors disappear:

Sandbox: https://codesandbox.io/s/modest-cherry-udfg3

typescript


export interface BoxProps extends React.HTMLAttributes<HTMLElement> {
  /** The element to render */
  as: 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer'
  /** The children to display */
  children?: React.ReactNode
  /** The ref to forward  */
  forwardRef?: React.RefObject<HTMLElement>
}

export function Box({ children, className, style, as: As, forwardRef, ...htmlProps }: BoxProps) {
  return (
    <As style={{ ...style }} className={cn('Box', className)} ref={forwardRef} {...htmlProps}>
      {children}
    </As>
  )
}

Answer 1

Since HTMLDivElement extends HTMLElement , you could simply use

forwardRef?: React.RefObject<HTMLDivElement>

to get rid of the compiler screams.

However, this solution looks a bit odd since as is not supposed to be exclusively a div element.

To make code clearer, you could use an intersection type to combine HTMLElement with HTMLDivElement

forwardRef?: React.RefObject<HTMLElement & HTMLDivElement>