HOC - 类型 '{...}' 不可分配给类型 'IntrinsicAttributes & PropType'

Question

嗨，我收到这个错误：

Type '{ children: Element; onClickOutside: () => void; }' is not assignable to type 'IntrinsicAttributes & PopUpWrapperProps'.
Property 'children' does not exist on type 'IntrinsicAttributes & PopUpWrapperProps'.ts(2322)

当尝试在InfoIcon.tsx中使用<PopUpWrapper>时，我猜这是因为在withPortal.tsx中键入了一个错误，但我尝试了很多方法，都没有让错误消失。。。你知道如何解决这个问题吗？

---

文件：

带Portal.tsx

const withPortal = <P extends object>(Component : React.ComponentType<P>, querySelector = "#portal") => (props : P)  => {
const isMounted = useMounted(null)
return isMounted && ReactDOM.createPortal(
<Component {...props}/>, 
document.querySelector(querySelector)
)
}
export default withPortal

PopUpWrapper.tsx

interface PopUpWrapperProps {
onClickOutside: () => void
}
const PopUpWrapper : React.FC<PopUpWrapperProps> = ({children, onClickOutside}) => {
...
return <div className={styles.popup_wrapper} ref={ref} onClick={handleClick}>
{children}
</div>
}
export default withPortal(PopUpWrapper)

InfoIcon.tsx

interface InfoIconProps {
src: string,
alt: string
className?: string,
isProtected?: boolean
}
const InfoIcon : React.FC<InfoIconProps> = ({
src, alt, children, className = "", isProtected = true
}) => {
...
return <div className={styles.info_icon}>

...

{
identity === Identity.Testing && 
<PopUpWrapper onClickOutside={cancelIdendityTest}> //error here
<IdentityPopup />
</PopUpWrapper>
}
</div>
}
export default InfoIcon;

Answer 1

只需将孩子添加到道具类型中即可：

interface PopUpWrapperProps {
onClickOutside: () => void,
children: any
}