React，useRef 不允許訪問當前屬性，得到 Uncaught TypeError: Cannot read properties of undefined (reading 'clientHeight')

Question

我正在使用以下方法存儲對圖像項的引用： const renderedImageRef = useRef() 。 然后使用以下方法在render() function 中分配 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} 。 必須在ref在current字段中獲取其值之前呈現 JSX。

一個解決方案是在top使用 state ：

const [top, setTop] = useState(0);
useEffect(() => {
  // At this point, the current is defined. This if is useful in case you use TypeScript
  if (renderedImageRef.current) {
    setTop(renderedImageRef.current.clientHeight);
  }
}, []);

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