如何实现无额外包裹的React可见性追踪高阶组件？

你当前的写法是传入已渲染的JSX元素，这种场景下无法直接给目标元素绑定追踪用的ref，所以核心思路是把HOC改成包装组件的形式（而非接收现成JSX），通过ref转发把观察逻辑绑定到目标组件的根元素上，完全不需要额外的section/div包裹。

重构后的HOC代码 #

import React, { useEffect, useRef } from 'react';

// HOC接收的额外props定义
interface VisibilityHandlerProps {
  visibilityThreshold?: number;
  onVisibleCallback?: () => void;
}

// HOC：接收一个组件作为参数，返回带可见性追踪的新组件
const VisibilityHandler = <P extends object>(
  WrappedComponent: React.ComponentType<P & React.RefAttributes<HTMLElement>>
) => {
  // 使用forwardRef转发ref，确保能绑定到目标组件的根元素
  return React.forwardRef<HTMLElement, P & VisibilityHandlerProps>((props, ref) => {
    const { visibilityThreshold, onVisibleCallback, ...restProps } = props;
    // 优先使用外部传入的ref，没有则用内部ref
    const targetRef = ref || useRef<HTMLElement>(null);

    useEffect(() => {
      const observer = new IntersectionObserver(
        (entries) => {
          const [entry] = entries;
          if (entry.isIntersecting) {
            onVisibleCallback?.();
          }
        },
        {
          rootMargin: '0px',
          threshold: visibilityThreshold ?? 0
        }
      );

      const currentElement = targetRef.current;
      if (currentElement) {
        observer.observe(currentElement);
      }

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

    // 将ref和剩余props传递给被包装的组件
    return <WrappedComponent ref={targetRef} {...restProps} />;
  });
};

export default VisibilityHandler;

使用方式 #

方式1：包装自定义函数组件 #

如果是自定义函数组件，需要用React.forwardRef让组件能接收ref并绑定到根元素：

// 定义需要追踪的组件
const MyComponent = React.forwardRef<HTMLDivElement>((props, ref) => {
  return <div ref={ref} {...props}>Hello World</div>;
});

// 用HOC包装组件
const VisibleMyComponent = VisibilityHandler(MyComponent);

// 在页面中使用
<VisibleMyComponent 
  visibilityThreshold={0.5} 
  onVisibleCallback={() => console.log('组件进入视口了！')} 
/>

方式2：直接包装原生DOM组件 #

原生DOM组件（如div、img）本身支持ref，可直接包装：

// 包装原生img标签
const VisibleImage = VisibilityHandler('img');

// 使用时传入属性和回调
<VisibleImage 
  src="example.jpg" 
  alt="示例图"
  onVisibleCallback={() => console.log('图片加载完成前已进入视口！')}
/>

关键说明 #

• 不再需要额外包裹标签：追踪逻辑直接绑定到目标组件的根DOM元素上
• 支持外部传入ref：如果业务需要操作目标元素的ref，不会和追踪逻辑冲突
• 兼容函数/类组件：类组件无需额外处理forwardRef，ref默认指向组件实例（只要根元素是DOM元素即可被观察）

内容的提问来源于stack exchange，提问作者Shivam Sahil