当我们处于功能模式时，我们有一个简单的方法来定义通用vue组件：

type Loading = { status: 'LOADING' }
type Error = { status: 'ERROR'; message: string }
type AsyncData<T> = Loading | { status: 'LOADED'; value: T } | Error

type Props<T> = {
  data: AsyncData<T>
  renderItem: (item: T) => JSX.Element | null
}

const LoadingElement = <T,>(props: Props<T>) => {
  return (
    <div class={`${props.data.status === 'LOADING' ? styles['top-level'] : ''}`} style={props.data.status !== 'LOADED' ? 'display: flex; justify-content: center' : ''}>
      {props.data.status === 'LOADED' ? props.renderItem(props.data.value) : null}
      {props.data.status === 'ERROR' ? (
        <div>
          <HelpTooltip icon="error-warning" text={props.data.message} />
        </div>
      ) : null}
      {props.data.status === 'LOADING' ? <div class={styles.spinner}></div> : null}
    </div>
  )
}

我可以这样使用：

<LoadingElement data={utilisateur.value} renderItem={item => <>{item ? `${item.prenom || '–'} ${item.nom || '–'}` : '–'}</>} />

其中项被正确键入。
我的主要问题是使用defineComponent（即。当我需要使用ref、watch或computed时，...）我无法找到正确泛化组件的方法。
最糟糕的是将我们的组件 Package 在一个功能组件中。
例如：

const GenericComponentHack = <T>() =>
  defineComponent<Props<T>>({ setup(props) => {
    return () => <OtherComponent {...props} />
  })

export const GenericComponent = <T>(props: Props<T>): JSX.Element => {
  const GenericComponentHackInstance = GenericComponentHack<T>()
  // @ts-ignore
  return <GenericComponentHackInstance {...props} />
}

这感觉很难看，有没有别的办法？