HOC - 类型“{...}”不可分配给类型“IntrinsicAttributes & PropType”答案

【问题标题】：HOC - Type '{...}' is not assignable to type 'IntrinsicAttributes & PropType'HOC - 类型“{...}”不可分配给类型“IntrinsicAttributes & PropType”
【发布时间】：2022-01-18 14:00:18
【问题描述】：

您好，我收到此错误：

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 的错误输入，但我尝试了很多方法并没有让错误消失... 你知道如何解决这个问题吗？

文件：

withPortal.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;

【问题讨论】：

标签： reactjs typescript typeerror typescript-typings react-hoc

【解决方案1】：

只需将孩子添加到您的道具类型中：

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

【讨论】：