切換元素后立即訪問 DOM ref 的最佳方法是什么？

Question

考慮這個組件：

function Component() {
  const [show, setShow] = useState(false);
  const ref = useRef(null);

  return (
    <div>
      <button
        onClick={() => {
          setShow(true);
          console.log(ref.current); // -> null
          setTimeout(() => {
            console.log(ref.current); // -> <div>123</div>
          }, 0);
        }}
      >
        show
      </button>
      {show && <div ref={ref}>oh hi!</div>}
    </div>
  );
}

參考 object 將為空，因為 object 只會在下一次重新渲染時插入。 有沒有比setTimeout更好的方法來訪問 dom ref？

Answer 1

使用在每次更新后運行的useEffect()鈎子（以及組件安裝時）。

代碼沙盒

在此處閱讀有關它的更多信息

useEffect 有什么作用？ 通過使用這個 Hook，你告訴 React 你的組件需要在渲染之后做一些事情。 React 會記住你傳遞的 function（我們將其稱為我們的“效果”），並在執行 DOM 更新后調用它。

每次渲染后都會運行 useEffect 嗎？ 是的，默認情況下。 它在第一次渲染后和每次更新后運行。

 export default function Component() { const [show, setShow] = useState(false); const ref = useRef(null); useEffect(() => { console.log(ref.current); }, [show]); return ( <div> <button onClick={() => { setShow(true); }} > show </button> {show && <div ref={ref}>oh hi;</div>} </div> ); }