为何在useEffect中MUI Dialog内的ref.current为null？

原因分析 #

你的问题确实和MUI Dialog的Portal实现有关，同时还有一个容易忽略的细节：

1. Dialog默认未激活渲染：MUI Dialog的open属性默认是false，此时Dialog的所有内容（包括你绑定ref的div）都不会被渲染到DOM中，自然ref.current为null。
2. Portal的渲染时机：即使手动设置open={true}，Dialog的内容会通过React Portal被渲染到当前组件DOM层级之外的独立容器（通常是<body>下的专用节点）。空依赖的useEffect会在当前组件挂载完成时执行，但此时Portal的内容可能还未完成挂载流程，导致ref还未被赋值。

而你自定义的模态框没有使用Portal，内容和组件本身同属一个DOM层级，组件挂载完成时内容已经渲染完毕，所以ref能正常获取。

解决方案 #

要在首次挂载时可靠获取到ref，且不给useEffect添加依赖，可以采用以下方法：

推荐方案：使用Dialog官方回调 #

MUI Dialog提供了onEntered回调，它会在Dialog完全进入（包括Portal内容渲染完成、过渡动画结束）时触发，此时内部元素已经挂载到DOM，ref已完成赋值。

示例代码：

const Modal = () => {
  const myRef = useRef();

  const handleDialogReady = () => {
    const node = myRef.current;
    if (node) {
      // 这里可以正常操作DOM节点
      console.log("获取到DOM节点：", node);
    }
  };

  return (
    <Dialog open={true} onEntered={handleDialogReady}>
      <DialogContent>
        <div ref={myRef}></div>
      </DialogContent>
    </Dialog>
  );
};

如果不需要过渡动画，可以设置transitionDuration={0}让onEntered立即触发：

<Dialog open={true} onEntered={handleDialogReady} transitionDuration={0}>
  {/* 内容 */}
</Dialog>

内容的提问来源于stack exchange，提问作者Nyi Nyi Hmue Aung