React/TypeScript:我应该如何处理这种风格的组件组合

Question

我对typescript很陌生，所以请耐心等待。

我正在尝试转换这个react组件：

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>
);
};

但我在<Element>元素上得到以下错误：

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

我可以通过用any键入Element来满足编译器的要求，但这感觉很脏。

从TS的角度来看，我应该如何处理这种模式？

谢谢！

Answer 1

使用ElementType

interface ButtonProps {
...
as?: ElementType
}