ReactJS：给子组件内部元素赋值Ref始终返回Null的问题

嘿，我太懂这种抓耳挠腮的感觉了——之前我也在这个问题上踩过好几次坑，结合你说的即使移除加载逻辑还是返回null的情况，大概率是这几个常见原因，咱一个个来捋：

1. 子组件是函数组件，没做Ref转发 #

函数组件默认是不接收外部传入的Ref的，如果你直接给函数组件挂Ref，拿到的只会是null。必须用React.forwardRef把Ref转发到子组件内部的DOM元素上。

举个例子：

错误写法（子组件） #

const ChildComponent = () => {
  return <input type="text" />;
};

此时父组件里的useRef拿到的就是null。

正确写法（子组件用forwardRef） #

const ChildComponent = React.forwardRef((props, ref) => {
  return <input type="text" ref={ref} />;
});

这样父组件的Ref就能直接拿到子组件内部的input元素了。

2. 子组件内部元素存在隐性条件渲染 #

你说移除了加载逻辑，但可能子组件内部还有其他条件判断（比如根据props状态决定是否渲染目标元素）。比如：

const ChildComponent = React.forwardRef((props, ref) => {
  if (!props.showElement) {
    return null;
  }
  return <input type="text" ref={ref} />;
});

如果showElement是false，那元素根本没挂载，Ref自然是null。这时候你要确保在访问Ref之前，元素已经被渲染到DOM中。

怎么确认？ #

可以在子组件的目标元素上加useEffect，挂载时打印日志：

const ChildComponent = React.forwardRef((props, ref) => {
  useEffect(() => {
    console.log("元素已挂载");
  }, []);
  return <input type="text" ref={ref} />;
});

如果没看到日志，说明元素确实没渲染，得排查内部的条件逻辑。

3. 访问Ref的时机不对 #

即使元素已经存在，如果你在组件渲染阶段直接访问ref.current，也会拿到null——因为React的渲染流程是先执行组件代码，再更新DOM，此时Ref还没绑定到DOM元素上。

正确的访问时机： #

• 在useEffect里（DOM更新完成后触发）：

const ParentComponent = () => {
  const inputRef = useRef(null);
  
  useEffect(() => {
    // 这里能拿到正确的DOM元素
    console.log(inputRef.current);
  }, []);
  
  return <ChildComponent ref={inputRef} />;
};

• 在事件回调里（比如点击按钮时）：

const ParentComponent = () => {
  const inputRef = useRef(null);
  
  const handleClick = () => {
    // 点击时DOM已经渲染完成，能拿到Ref
    inputRef.current?.focus();
  };
  
  return (
    <>
      <ChildComponent ref={inputRef} />
      <button onClick={handleClick}>聚焦输入框</button>
    </>
  );
};

4. 子组件是类组件时的特殊情况 #

如果你的子组件是类组件，直接给组件挂Ref拿到的是组件实例，不是内部DOM元素。要拿到内部元素，有两种方式：

• 在子组件内部给目标元素绑定Ref，然后暴露一个方法让父组件调用：

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }
  
  getInputElement() {
    return this.inputRef.current;
  }
  
  render() {
    return <input type="text" ref={this.inputRef} />;
  }
}

父组件里：

const ParentComponent = () => {
  const childRef = useRef(null);
  
  useEffect(() => {
    const inputElement = childRef.current?.getInputElement();
    console.log(inputElement);
  }, []);
  
  return <ChildComponent ref={childRef} />;
};

• 或者用React.forwardRef结合类组件的ref转发（不过类组件用forwardRef需要额外处理，更推荐上面的方法）。

最后排查步骤 #

1. 先确认子组件是否用了React.forwardRef（函数组件）或者内部绑定了Ref并暴露方法（类组件）；
2. 检查子组件内部的元素是否真的被渲染了（没有被条件判断隐藏）；
3. 确保你是在DOM更新完成后访问ref.current（比如useEffect或事件回调）。

按照这几步排查，应该能解决你的问题～

内容的提问来源于stack exchange，提问作者Ricky Orlando Napitupulu