Question

我正在创建一个具有动态级别标题的自定义组件：

const HeadingTag = `h${headingLevel}`;
...
<HeadingTag className='heading'>
  {headingText}
</HeadingTag>

但是，出现以下错误：

error TS2322: Type '{ children: string; className: string; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'children' does not exist on type 'IntrinsicAttributes'.

如何将默认HTML属性传递给可解析为默认HTML标签的自定义标签？

Answer 1

您可以使用动态标签名称，但是标签名称的类型必须是字符串文字类型或与标签名称相对应的字符串文字类型的并集。

不幸的是，打字稿无法理解h${headingLevel}将计算为h标记之一（如果headingLevel是适当的数字或字符串文字类型联合，则打字稿只是没有）机械。）

在这种情况下，最简单的解决方案是，我们比编译器拥有更多的信息，是使用类型断言来使打字稿知道HeadingTag将是'h1' | 'h2' | 'h3' | 'h4' | 'h5'| 'h6'：

const HeadingTag = `h${headingLevel}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5'| 'h6';
<HeadingTag className='heading'>
    {headingText}
</HeadingTag>

如何将className传递给`h $ {headingLevel}`自定义标签

1 个答案: