Как преобразовать строку в тег?

Question

[Hackerbot1488]

Псевдокод:

interface listProps {
  tag: string;
  children: React.ReactNode;
}
export const List: React.FC<listProps> = ({ tag: Tag, children }) => {
  return (
    <Tag className="some-class">{children}</Tag>
  )
}

В js можно спокойно так сделать, ts ругается: "Тип "{ children: ReactNode; className: any; }" не может быть назначен для типа "IntrinsicAttributes".
Свойство "children" не существует в типе "IntrinsicAttributes".ts(2322)"
Как можно решить эту проблему, не меняя расширение файла на jsx?

Answer 1

[Дмитрий Беляев]

Придется без tsx такую магию делать

import React from 'react';
export const Tag: React.FC<{
  tag: string;
  [prop: string]: any;
}> = ({children, tag, ...props}) => React.createElement(tag, props, children);

Так же для ограничения имени тэга можно использовать тип keyof HTMLElementTagNameMap

Comments

[Hackerbot1488]

Спасибо, переделал под свой кейс

Answer 2

[Mikhail Osher]

children автоматом есть при использовании React.FC, поэтому достаточно сделать так:

interface listProps {
  tag: React.ComponentType;
}