我正在使用以下方式存盤對影像項的參考：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')
奇怪的是，如果我嘗試renderedImageRef.current.clientHeight從useEffect鉤子內部訪問，它會正確顯示高度：
useEffect(() => {
if(renderedImageRef !== null) {
console.log(renderedImageRef)
}
}, [renderedImageRef])
為什么我收到控制臺錯誤？
uj5u.com熱心網友回復：
一個可能的答案是這條線：
<div style={{top: `${renderedImageRef.current.clientHeight}px`}}>Hello world</div>
在此之前進入您的代碼：
<img ref={renderedImageRef} src=... />
在女巫的情況下，您收到錯誤是正常的。要知道，當你呼叫 時const renderedImageRef = useRef()， 的值renderedImageRef是{current:undefined}html 需要在一個 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/441520.html
標籤：javascript 反应 使用参考