React Hooks中用useRef获取HTML元素为何返回{current: null}？

你的代码存在两个明显问题，导致你打印出{current: null}：

• 语法错误：箭头函数组件使用了圆括号() => (，这种写法只能直接返回JSX内容，无法在内部编写变量声明、console.log这类语句，必须改用大括号() => { }包裹完整函数体。
• 未绑定目标DOM元素：你声明了span这个useRef变量，但组件的JSX里既没有<span>元素，也没有将ref绑定到任何DOM节点上，current属性自然会保持初始值null。

修正后的代码 #

import React, { useRef, useEffect } from 'react';

const Hi = () => {
  const span = useRef<HTMLSpanElement>(null);
  
  // 借助useEffect在组件挂载完成后打印，此时DOM已渲染，ref已关联到元素
  useEffect(() => {
    console.log(span);
  }, []);

  return(
    <div>
      <p>hi</p>
      {/* 将ref绑定到目标span元素 */}
      <span ref={span}>示例span元素</span>
    </div>
  );
};

export default Hi;

补充说明：组件首次渲染时DOM还未生成，此时直接打印ref会得到null，使用useEffect并传入空依赖数组，能确保代码在组件挂载完成后执行，这时就能拿到绑定后的DOM元素。

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