React中useRef绑定DOM节点后打印ref.current返回undefined问题排查

• Hook使用错误：你错误将useEffect写成了useState。useState的参数为状态初始值，传入函数时只会在组件初始化阶段执行，此时DOM还未完成挂载，ref还未绑定到对应节点上，因此current属性为undefined。
• 执行时机错误：即使没有写错Hook，在DOM挂载完成前访问ref的current属性都会返回undefined，必须等待节点渲染到DOM树后才能获取到绑定的元素。

• 将代码中的useState替换为useEffect，useEffect的回调函数会在组件DOM挂载完成后执行，此时ref已经完成绑定，可以正常获取到节点。
• 如果你的rightCompX节点存在条件渲染逻辑，需要保证执行useEffect时该节点的渲染条件为真，避免节点未渲染导致ref绑定失败。
• 访问元素时直接读取Cbox.current即可，GSAP动画逻辑也可以放在这个useEffect回调中执行。

import React, { useRef, useEffect } from 'react';
import {gsap} from 'gsap';
import RingGraph from '../../../components/RingGraph/RingGraph';
import './CR.css';

const InterviewReport = (props) => {
    // 建议给ref设置初始值null，更符合开发规范
    const Cbox = useRef(null)

    useEffect(()=>{
        // 此时能正常获取到rightCompX节点
        console.log(Cbox.current)
        gsap.from(Cbox.current,{opacity:0,duration:0.8,x:-40})
    },[])

    return (
        <>
            <div className="rightCompX" ref={Cbox}>
                <div className="close" onClick={props.close}>
                    close
                </div>
                <div className="title">
                    candidate Report
                </div>
                .....
        </>
    )
}

export default InterviewReport;

内容的提问来源于stack exchange，提问作者Markus nuan