我正在使用以下命令存储对图像项的引用：然后，在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])为什么我会收到控制台错误？
2条答案
按热度按时间wko9yo5t1#
一个可能的答案是这一行：
出现在你的代码中，在这个之前：
在这种情况下，出现错误是正常的。要知道，当您调用
const renderedImageRef = useRef()时，renderedImageRef的值是{current:undefined}。必须在ref在current字段中获得其值之前呈现JSX。解决方案是使用
top的状态：一个二个一个一个
ghhaqwfi2#
如果你使用的是Next.JS，我认为你必须将依赖项更改为renderedImageRef.current。