Как передать className в пользовательский тег `h${headingLevel}`
Я создаю пользовательский компонент с заголовком динамического уровня:
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 по умолчанию?
Ответы 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>