React中使用ref获取DOM节点总是返回null怎么办？

シ庆娇提问于 2026-02-11 09:37:35 阅读 19

前端

我在React组件里用useRef想获取一个div的宽度，但点击按钮时总报错说current是null。代码写成这样：


function BoxComponent() {
  const boxRef = useRef(null);

  const handleClick = () => {
    console.log(boxRef.current.offsetWidth); // 这里报错
  };

  return (
    <div>
      <div ref="boxRef">内容区域</div>
      <button onClick={handleClick}>测量宽度</button>
    </div>
  );
}

我明明给div加了ref=”boxRef”，但点击按钮时控制台显示boxRef.current是null。尝试过把ref初始化成new useRef()，也检查过组件是否渲染，但问题依旧。是不是因为用了函数组件？或者ref的写法哪里错了？

我来解答赞 3 收藏

反馈

1 条解答

上官玲玲 Lv1

你这个问题出在ref的写法上，根本没绑定成功。你写了 ref="boxRef"，这是字符串形式，早就被废弃了，现在得用函数或useRef返回的对象。

useRef返回的是个对象，你要把整个boxRef传给ref属性，不是传名字。另外初始化用 useRef(null) 是对的，别搞 new useRef() 这种不存在的东西。

还有就是，刚挂载的时候DOM可能还没生成，你得确保节点已经渲染出来了再访问。

改法很简单：

function BoxComponent() {

  const boxRef = useRef(null);



  const handleClick = () => {

    if (boxRef.current) {

      console.log(boxRef.current.offsetWidth); // 现在能取到了

    } else {

      console.log('节点还没挂载');

    }

  };



  return (

    

      内容区域


      

    


  );

}

关键点就两个：一是 ref={boxRef} 要用花括号传引用，二是读之前判空。React会自动把DOM节点缓存到current里，只要节点渲染了就能拿到。

你之前写成 ref="boxRef"，那只是个字符串属性，跟useRef完全没关系，current当然一直是null。

2026-02-11 10:02