React, useRef not allowing to access current properties, getting Uncaught TypeError: Cannot read properties of undefined (reading 'clientHeight')

Question

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

<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')

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

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()的时候，renderedImageRef的值是{current:undefined}。 JSX 需要在 ref 在 current 字段中获取其值之前呈现。

一个解决方案是为 top:

使用一个状态

const [top, setTop]=useState(0)
useEffect(() => {
    if(renderedImageRef.current) {
        setTop(renderedImageRef.current.clientHeight);
    }
}, [renderedImageRef])

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

Answer 2

如果您正在使用 Next.JS，我认为您必须将依赖项更改为 renderedImageRef.current。所以像这样：

const [top, setTop]=useState(0)
useEffect(() => {
    if(renderedImageRef.current) {
        setTop(renderedImageRef.current.clientHeight);
    }
}, [renderedImageRef.current])

React, useRef not allowing to access current properties, getting Uncaught TypeError: Cannot read properties of undefined (reading 'clientHeight')

React, useRef not allowing to access current properties, getting Uncaught TypeError: Cannot read properties of undefined (reading 'clientHeight')

javascript

reactjs

use-ref