您可以使用

• 作为一个孩子
• React.cloneElement

作为孩子的功能

<VisibilityHandler Component={({ ref }) => <div ref={ref}>Hello world</div>} />

你必须更改你的HOC代码

- return <section ref={ref}>{Component}</section>;
 + return Component({ ref });

React.cloneElement
文件
你的案子

- return <section ref={ref}>{Component}</section>;
 + return React.cloneElement(Component, { ref });

• • 但我强烈建议使用钩子（包）而不是HOC。**
• react-use: useIntersection
• react-intersection-observer

我发现了一个非常简洁的方法，就像这样：

import React from 'react';

interface IVisibility {
    Component: JSX.Element;
    visibilityThreshold?: number;
    onVisibleCallback?: () => void;
}

const VisibilityHandler = ({
    Component,
    visibilityThreshold,
    onVisibleCallback
}: IVisibility): JSX.Element => {
    const ref = React.useRef(null);
    React.useEffect(() => {
        const componentObserver = new IntersectionObserver(
            (entries) => {
                const [entry] = entries;
                if (entry.isIntersecting) {
                    onVisibleCallback ? onVisibleCallback() : null;
                }
            },
            {
                rootMargin: '0px',
                threshold: visibilityThreshold ?? 0
            }
        );
        const current = ref.current;

        if (current) componentObserver.observe(current);

        return () => {
            componentObserver.disconnect();
        };
    }, [visibilityThreshold, onVisibleCallback]);

    return <Component.type {...Component.props} ref={ref} />;
};

export default VisibilityHandler;