javascript - React，useRef 不允许访问当前属性，得到 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 Hook 中访问 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>