自定义Hook中使用useRef无法获取DOM元素，如何正确实现？

你的useGetHTML Hook无法正常工作的核心问题是：Hook内部创建的useRef没有返回给组件，导致组件里的DOM元素无法将自身挂载到这个ref对象上，所以控制台打印的始终是null。

修正步骤： #

• 让useGetHTML返回内部创建的ref对象，供组件绑定到目标DOM元素
• 可在useEffect中增加判断，避免初始渲染时打印null

修正后的完整代码： #

import "./styles.css";
import { useEffect, useRef, useState } from "react";

function useChangeText() {
  const [n, setN] = useState(0);
  const sum = () => setN(n + 1);
  return { number: n, sum };
}

function useGetHTML(n) {
  const elementRef = useRef(null);
  
  useEffect(() => {
    // 确保ref已关联到DOM元素再打印
    if (elementRef.current) {
      console.log(elementRef.current);
    }
  }, [n]);

  // 返回ref，供组件绑定到DOM元素
  return elementRef;
}

export default function App() {
  const hookSum = useChangeText();
  // 接收Hook返回的ref
  const elementRef = useGetHTML(hookSum.number);

  return (
    <div ref={elementRef} className="App">
      <h1>{hookSum.number}</h1>
      <button onClick={hookSum.sum}>click +1</button>
    </div>
  );
}

说明： #

• useGetHTML返回内部的elementRef，App组件将这个ref绑定到div上，当组件挂载后，ref.current就会指向该div元素
• 点击按钮更新n时，useEffect会触发，此时能正确打印出对应的DOM元素

内容的提问来源于stack exchange，提问作者Usiel