将 Component 和 Component 的 props 作为 props 传递时出现 Typescript 错误

Question

我目前正在创建一个

Popover

组件，它接受

TriggerComponent

作为道具。

TriggerComponent

可以是

Link

或

Button

（在我的例子中都是自定义组件），它们各自的道具定义为

LinkProp

和

ButtonProp

。

我的目标是在 TypeScript 中创建一个通用接口，确保如果用户将

Link

作为

TriggerComponent

传递，则在

restTriggerProps

中只允许使用特定于 Link 的道具。同样，如果它们通过了

Button

，则仅应接受特定于 Button 的道具。

我尝试了很多不同的方法来解决这个问题，但我不断收到不同的错误。

对于下面的代码，我遇到了这个错误：

'T' could be instantiated with an arbitrary type which could be unrelated to '{ children: string; download?: any; href?: string | undefined; hrefLang?: string | undefined; media?: string | undefined; ping?: string | undefined; target?: HTMLAttributeAnchorTarget | undefined; ... 268 more ...; value?: string | ... 2 more ... | undefined; }'

interface Props<T> {
  children?: ReactNode
  triggerLabel: string
  TriggerComponent: FC<T>
  restTriggerProps?: T & AnchorHTMLAttributes<HTMLAnchorElement> &
      ButtonHTMLAttributes<HTMLButtonElement>
}

export const Popover = <T,>({
  TriggerComponent,
  triggerLabel,
  restTriggerProps,
  children,
}:Props<T>) => {
  const [showPopover, setShowPopover] = useState(false)

  const onToggle = () => {
    setShowPopover((prev) => !prev)
  }

  return (
    <div>
      <TriggerComponent
        onClick={onToggle}        
        {...restTriggerProps}
      >
        {triggerLabel}
      </TriggerComponent>
      {showPopover && (
        <div
          className="popover-content"       
        >
          {children}
        </div>
      )}
    </div>
  )
}

Answer 1

如果有人想弄清楚这一点。这是在 Discord 中找到的解决方案

解决方案：Typescript Playground

解决方案说明：Discord Channel