React中无法访问Modal元素Ref的问题求助

你遇到的问题核心是CSSTransition的mountOnEnter和unmountOnExit导致Modal组件初始未挂载，加上useEffect错误依赖了不会变化的modalRef，所以初始执行时modalRef.current还是undefined，直接访问offsetWidth就报错。

具体解决步骤： #

• 修正useEffect依赖项：modalRef是useRef创建的稳定对象，它本身不会变化，依赖它的useEffect只会执行一次（组件初始挂载时），这时候visible是false，Modal还没被挂载。应该把依赖改成visible，当visible变为true时，Modal挂载后再执行逻辑。
• 增加ref存在性检查：即使监听了visible，也要确保modalRef.current存在后再访问DOM属性，避免意外报错。
• 利用CSSTransition回调获取准确时机：如果需要在Modal动画完成后再计算定位，用onEntered回调，这时候DOM元素已经完全渲染且动画结束，获取尺寸和位置更准确。
• 结合触发元素位置设置Modal定位：把触发元素的位置信息存到状态里，通过内联样式给Modal设置定位。

修改后的完整代码： #

import {
  forwardRef,
  useEffect,
  useImperativeHandle,
  useRef,
  useState,
} from "react";
import ReactDOM from "react-dom";
import "./UserParamModal2.css";
import { CSSTransition } from "react-transition-group";

const UserParamModalOverlay = forwardRef((props, ref) => {
  // 基于触发元素位置生成定位样式
  const modalStyle = {
    position: 'absolute',
    top: `${props.triggerTop}px`,
    left: `${props.triggerLeft}px`,
    marginTop: '10px' // 可根据需求调整偏移量
  };

  const content = (
    <div 
      className={`userparammodal ${props.className}`} 
      ref={ref}
      style={modalStyle}
    >
      {props.children}
    </div>
  );
  return ReactDOM.createPortal(
    content,
    document.getElementById("modal-user-param")
  );
});

const UserParamModal2 = forwardRef((props, ref) => {
  const [visible, setVisible] = useState(false);
  const [triggerPos, setTriggerPos] = useState({ top: 0, left: 0 });
  const modalRef = useRef();

  useImperativeHandle(ref, () => {
    return {
      toggle(event) {
        // 保存触发元素的位置信息
        const { offsetTop, offsetLeft } = event.target;
        setTriggerPos({ top: offsetTop, left: offsetLeft });
        setVisible(prev => !prev);
      },
    };
  });

  // 监听visible状态变化，Modal挂载后执行DOM操作
  useEffect(() => {
    if (visible && modalRef.current) {
      console.log("Modal宽度：", modalRef.current.offsetWidth);
      // 这里可添加更多定位计算逻辑
    }
  }, [visible]);

  // 动画完成后的回调，适合需要等待动画结束的场景
  const handleEntered = () => {
    if (modalRef.current) {
      console.log("动画完成后Modal宽度：", modalRef.current.offsetWidth);
    }
  };

  return (
    <CSSTransition
      in={visible}
      mountOnEnter
      unmountOnExit
      timeout={200}
      classNames="userparammodal"
      onEntered={handleEntered}
    >
      <UserParamModalOverlay 
        {...props} 
        ref={modalRef}
        triggerTop={triggerPos.top}
        triggerLeft={triggerPos.left}
      />
    </CSSTransition>
  );
});

export default UserParamModal2;

关键改动说明： #

1. 新增triggerPos状态存储触发元素的位置，在toggle方法中更新。
2. UserParamModalOverlay接收位置参数，通过内联样式实现Modal相对于触发元素的定位。
3. 将useEffect的依赖改为visible，并增加modalRef.current的存在性判断，避免报错。
4. 新增onEntered回调，处理动画完成后的DOM操作（如果需要）。

这样就能正常获取Modal的DOM引用，同时实现相对于触发元素的定位需求。

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