React函数组件useEffect内使用this.refname.current无法访问Ref问题

你在React函数组件中使用Hooks开发，函数组件没有类组件对应的实例this对象，因此访问this会返回undefined。你声明的refOverlay是当前作用域下的常量，直接访问即可，不需要通过this前缀引用。

// Ref
const refOverlay = useRef(null); 

// 引用ref的useEffect逻辑
useEffect(() => {
    if (props.mode === 'new') {
        const a = refOverlay.current; // 直接访问声明的ref变量即可
        if (a) {
            console.log('ok');
        }
    }
}, [props.mode]);

// 渲染部分保持不变
return (
{/* JSX Definition */}
        <OverlayTrigger ref={refOverlay} trigger="click" rootClose placement="bottom" overlay={popoverApprover}>
            <a href="javascript:void(0)" className="more-info">TEST</a>
        </OverlayTrigger> 
);

• 若OverlayTrigger为自定义/第三方函数组件，需要确认该组件内部使用了React.forwardRef做ref透传，否则refOverlay.current会一直返回null。
• refOverlay本身不需要加入useEffect的依赖数组，useRef返回的对象引用在组件生命周期内是稳定不变的。

内容的提问来源于stack exchange，提问作者gene b.