样式组件+类型记录："as“不能分配到键入IntrinsicAttributes

Question

我有一个单一的，其中包含一个设计系统与样式的组成部分。在这个设计系统中，我有一个标题组件，它需要一个“级别”支柱来调整标题的CSS。

航向

export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
    level: 'colossus' | 'uber' | 'hero' | '1' | '2' | '3' | '4' | '5'
}

export const Heading: React.FC<HeadingProps> = ({ level = '1', children, ...rest }) => {
    return (
        <HeadingStyled level={level} {...rest}>
            {children}
        </HeadingStyled>
    )
}

使用

要使用这个标题组件，我只需将一个level传递给它，用于样式和as支柱，以调整所呈现的内容。

<Heading as="h2" level="2">
    Header 2
</Heading>

问题

当我使用这个组件时，我会在as支柱上得到一个类型记录错误

Type '{ children: string; as: string; level: "2"; }' is not assignable to type 'IntrinsicAttributes & HeadingProps & { children?: ReactNode; }'.

Property 'as' does not exist on type 'IntrinsicAttributes & HeadingProps & { children?: ReactNode; }'.

我试过：

export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
    level: 'colossus' | 'uber' | 'hero' | '1' | '2' | '3' | '4' | '5'
    as?: React.Element | JSX.Element | JSX.IntrinsicElements
}

Answer 1

您已经接近了！JSX.IntrinsicElements是一个接口，它的键是HTML的标签。它本身并不是所有HTML标记的联合。

这意味着你要做的就是

interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
    // ...
    as?: keyof JSX.IntrinsicElements // Note the keyof!
}

现在TS将as的签名显示为：

(JSX attribute) HeadingProps.as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 156 more ... | undefined

这意味着您的代码现在将完全按照预期工作。

<Heading as="h2" level="2"> // No TS errors! ✅
    Header 2
</Heading>

TS游乐场链接

Answer 2

在完成@Aron答案的过程中，这段代码为我工作(styled-component + styled-system)

{ as?: ComponentType<any> | keyof JSX.IntrinsicElements | string | undefined }