Как передать className в пользовательский тег `h $ {headingLevel}`

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>