Реагировать на Typescript Component с переменным типом (из реквизита) - PullRequest
Новая
       19

Реагировать на Typescript Component с переменным типом (из реквизита)

1 голос
/ 09 апреля 2019

Я хочу создать компонент, который принимает его тип (например, 'div', 'span') от props и потомков и рендерит их, компонент также поддерживает переадресацию ref и className prop.

Проблема в том, что я получаю ошибку 'className' does not exist on type 'IntrinsicAttributes, и не могу понять, что ее вызывает.

Я попытался изменить типы, которые я предоставляю, на forwardRef с HTMLElementк другим, гуглил для похожих компонентов, но это мало помогло.

Когда я изменяю HTMLElement, например, на HTMLDivElement, и меняю <Component ...> на <div ...>, эта ошибка исчезает.Таким образом, проблема, вероятно, неправильного типа (HTMLElement)

Вот код компонента: 

import React, { ReactChildren, ComponentType } from "react"

interface MyComponentProps {
  children: ReactChildren
  component: string | ComponentType
  className: string
}

const MyComponent = React.forwardRef<HTMLElement, MyComponentProps>(
  (props, ref) => {
    const { children, className, component: Component, ...otherProps } = props

    return (
      <Component className={className} ref={ref} {...otherProps}>
        {children}
      </Component>
    )
  },
)

MyComponent.defaultProps = {
  component: "div",
}

export default MyComponent

Ожидаемый результат: нет ошибок машинописного текста.

Фактический результат:в строке появляется следующая ошибка <Component className={className} ref={ref} {...otherProps}>

TS2322: Type '{ children: ReactChildren | (ReactChildren & string) | (ReactChildren & number) | (ReactChildren & false) | (ReactChildren & true) | (ReactChildren & ReactElement<any, string | ((props: any) => ReactElement<...> | null) | (new (props: any) => Component<...>)>) | (ReactChildren & ReactNodeArray) | (ReactChildren & Re...' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
  Property 'className' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.
...