使用 react useRef() -- 為什么我的 ref 是 null？

Question

我有一個簡單的例子

function Node() {
    const [hidden, setHidden] = useState(true);
    const inputRef = useRef(null)
    console.log(inputRef);
    return (
        <div>
            {!hidden && <h2 ref={inputRef}>Hello World</h2>}
            {hidden && <button onClick={() => setHidden(false)}>Show Child</button>}
        </div>
    )
}

單擊按鈕后，我希望 h2 DOM 元素附加到我的 ref。 但是，我在記錄時發現 ref.current 仍然是 null，但是如果我展開 object，它包含 DOM 節點。

我應該如何通過我的 ref 訪問 DOM 元素？ 當時我想引用它，例如inputRef.current.getBoundingClientRect() ，它總是顯示為 null。 非常感謝您的幫助！

Answer 1

當 setHidden 設置為 false 時，您的 ref 未初始化，如果您想使用它，您需要一些這樣的交互

        import React, { useRef, useState, useEffect } from 'react';
    
    function App() {
        const [hidden, setHidden] = useState(true);
        const inputRef = useRef(null)
        console.log(inputRef);
        const handleChange=()=>{
        console.log(inputRef);
          
        }

useEffect(()=>{
   console.log(inputRef);
},[hidden])
        return (
            <div>
              <input onChange ={handleChange}></input>
                {!hidden && <h2 ref={inputRef}>Hello World</h2>}
                {hidden && <button onClick={() => setHidden(false)}>Show Child</button>}
            </div>
        )
    }
    
    export default App;

Answer 2

您正在嘗試在渲染階段使用 ref，但是一旦 React 在提交階段繪制屏幕，就會填充 ref。 所以，在useEffect或useLayoutEffect中調用它

// run synchronously after all DOM mutations
React.useLayoutEffect(() => {
  // do something with inputRef
}, [])