Что такое тип для JSX React 'div | п'?

Question

Я создаю пользовательский компонент и хочу передать имя элемента в качестве реквизита компонента, например div или p;HTMLElement

Подвох в том, что это должен быть блочный или встроенный элемент

export const MyComponent = props => {
  const currentNode = useRef()
  const { tag: Comp } = props
  return <Comp ref={currentNode}>Strawberry Kisses!</Comp>
}

Как видите, я разрушаю prop, чтобы получить tag значение (Component) и передача его в качестве элемента.

В настоящее время интерфейс ниже выдает ошибку

Type '{ ref: MutableRefObject<undefined>; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'ref' does not exist on type 'IntrinsicAttributes'.ts(2322)

interface MyProps extends React.ClassAttributes<MyComponent> {
  tag: string;
}

Мне нужно в основном проверить if (tag == HTMLElement && tag === JSX.IntrinsicElements) { return 'this is the correct type and allow it' }

Любая помощь в направлении приветствуется.

Answer 1

Насколько я могу судить, ваша ошибка не имеет ничего общего с вашим вопросом.

Чтобы исправить ошибку, вам нужно сделать <Comp ref={currentNode.current}>

Следующая ошибка, с которой вы, вероятно, столкнетесь, заключается в том, что вы не передаете реквизит тега своему дочернему компоненту.

На самом деле, чтобы ответить на ваш вопрос, я не думаю, что есть какое-либо встроенное перечисление или тип всех имен тегов HTML, поэтому вам придется определить его самостоятельно, тем более, что кажется, что вы хотите что-то еще специфичны.