为什么 React ref element.current 使用 useRef 钩子在 React 组件中返回 null？答案

【问题标题】：Why React ref element.current returns null in React component using useRef hook?为什么 React ref element.current 使用 useRef 钩子在 React 组件中返回 null？
【发布时间】：2023-03-26 05:38:01
【问题描述】：

我需要查询一个 DOM 元素并使用 useRef 钩子：

const Overlay = ({ children }: Props) => {
  const myRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    console.log(myRef.current);
  }, [myRef]);


  return (
    <React.Fragment>
      <Dialog fullScreen open={open}>
        <DialogContent id="dialog" ref={myRef}>
          <header>
           // Header
          </header>
          {children}
        </DialogContent>
      </Dialog>
    </React.Fragment>
  );
};

export default Overlay;

如果我检查控制台，它会返回 null。

如何使用useRef 查询 DOM 元素？

【问题讨论】：

Forwaring Refs
@Yousaf 谢谢。但是在我的情况下，我该如何使用React.forwardRef（使用 Material UI Dialog 或 DialogContent？
我希望 MaterialUI 将 ref 转发到底层的原生 DOM 元素。检查他们的文档，看看他们是否允许用户访问底层 DOM 元素。
@Yousaf 你的意思是没有forwardRef？只需像我的示例中那样使用 ref 道具吗？根据the docs，ref 被转发到根元素。但问题是，为什么它现在返回null？
@Yousaf 刚刚发现。我必须将道具 disablePortal 添加到材质 UI <Dialog>。现在它正在工作！

标签： reactjs ref use-ref

【解决方案1】：

所以 MUI Dialog 组件仅在 open === true 时挂载它的子级。我建议让您的 useEffect 依赖于 open 状态而不是参考。

  useEffect(() => {
    if (open) {
      console.log(myRef.current);
    } else {
      // myRef.current is null
    }
  }, [open]);

【讨论】：