React/TypeScript：我应该如何处理这种组件组合方式？

Question

I'm very new to typescript so please bear with me.

I'm trying to convert this react component:

interface ButtonProps {...}

const Button: React.FC<ButtonProps> = ({
  children,
  href,
  value
  as = 'button',
  ...props
}) => {
  const Element = href ? 'a' : as;
  // ...

  return (
    <Element {...props}>
      <span>{value || children}</span>
    </Element>
  );
};

But I'm getting the following error on the <Element> element:

JSX element type 'Element' does not have any construct or call signatures.

I can satisfy the compiler by typing Element with any but that feels dirty.

How should I be approaching this pattern from a TS point of view?

Thanks!

Answer 1

Use ElementType

interface ButtonProps {
  ...
  as?: ElementType
}