React useRef为null并且不能同时为null吗?

问题描述

我遇到了一个有趣的问题,我正在尝试为<div>分配引用,所以我有一个useRef()并将其放在我的<div上。我的目标是,一旦调用特定函数,我就可以在该div上模仿.click()。现在,当我调用函数不起作用时,引用为 null ,因此,我console.log(divRef)和在devtools中看到的内容如下:

enter image description here

我看到我的裁判上的当前值为 null ,但是里面还有对我的div的引用?我无法访问该div引用,即使当我看到它的属性时,也可以确认它确实是我要引用的div。

在devtools上进行进一步调查后,我右键单击并选择“另存为全局变量”以查看会发生什么,现在我可以正确地使用current: div来获得引用,只是为了确保确保将全局变量用于模拟.click()行为,它确实起作用!我只是保存了相同的对象,但是现在不知道在devtools上不是 null

enter image description here

当我记录我的引用时,为什么我可以看到我的div被返回但我却无法访问它,无论如何它为null而不同时为null?同样,我的目标是能够访问函数调用上的引用,以便模仿.click()

PD:我知道不鼓励使用图像,但是我真的想分享我在devtools中正在查看的内容,即该对象为null,但其中包含正确的引用。

解决方法

是否为空,并且同时不为空?

不。它的开发工具对该对象的评估,如果将鼠标悬停在蓝色的i图标上,它将告诉您刚刚评估了值。由于对象引用正在记录的时间与它为null时创建的时间相同;如果您真的想查看特定时间点对象中包含的内容,则应记录其JSON.stringify()值(或深层复制并记录复制的版本)。

ref创建时为空,而current将在第一次重新渲染后分配,这样会发生;