React，useRef不允许访问当前属性，出现Uncaught TypeError：无法读取未定义的属性（读取'clientHeight'）

Question

我正在使用以下方式存储对图像项目的引用：const renderedImageRef = useRef()。然后使用以下方法在函数中分配 ref render()：

<img ref={renderedImageRef} src=... />

在下面的另一个 JSX 项目中，我尝试renderedImageRef.current.clientHeight使用以下方式进行访问：

<div style={{top:`${renderedImageRef.current.clientHeight}px`}}>
   Hello world
</div>

但这会在控制台中产生错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'clientHeight')

renderedImageRef.current.clientHeight奇怪的是，如果我尝试从钩子内部访问useEffect，它会正确显示高度：

useEffect(() => {
    if(renderedImageRef !== null) {
        console.log(renderedImageRef)
    }
}, [renderedImageRef])

为什么我收到控制台错误？

Answer 1

一个可能的答案是这一行：

<div style={{top:`${renderedImageRef.current.clientHeight}px`}}>Hello world</div>

在此代码之前出现在您的代码中：

<img ref={renderedImageRef} src=... />

在这种情况下，您收到错误是正常的。就是要知道，当你调用的时候，的const renderedImageRef = useRef()值为。必须在 a获取字段中的值之前渲染 JSX 。renderedImageRef{current:undefined}refcurrent

解决方案是使用状态top：

<div style={{top:`${renderedImageRef.current.clientHeight}px`}}>Hello world</div>

<div style={{top:`${top}px`}}>Hello world</div>