I am working on a straightforward polymorphic React component that is designed to render only tag names (such as span) and not custom React components (like MyComponent). I believe this can be achieved using JSX.IntrinsicElements. Here is the code snippet I have:
import React from "react";
type PolymorphicComponentProps<T extends keyof JSX.IntrinsicElements> = {
as?: T;
} & JSX.IntrinsicElements[T];
const PolymorphicComponent = <T extends keyof JSX.IntrinsicElements = "div">({
as: Component = "div" as T,
...rest
}: PolymorphicComponentProps<T>) => {
return <Component {...rest} />; // TS error: JSX element type 'Component' does not have any construct or call signatures.
};
The generic type T will determine the HTML attributes that are available. For example, if I were to render PolymorphicComponent as an a tag...
<PolymorphicComponent as="a" />
...then I would get autocomplete for the href attribute/prop. And as another example, if I were to render PolymorphicComponent as an img tag...
<PolymorphicComponent as="img" />
...then I would get autocomplete for the src attribute/prop. While this seems to be functioning correctly, I am still facing the TypeScript error mentioned in the PolymorphicComponent component function definition:
JSX element type 'Component' does not have any construct or call signaturesWhat I can't figure out: The Component variable (alias for the as prop) has a type of T | (T & string). I would expect the type of Component to just be T.
If I create this very simple component that always renders a div, there are no TypeScript errors:
const DivComponent = () => {
const Div: keyof JSX.IntrinsicElements = "div";
return <Div />;
};
Question: What do I need to adjust to eliminate the TypeScript error? Based on my research, it seems like I don't need to switch the JSX with React.createElement, so I'm hoping to maintain the JSX version of this component if feasible.