Auf die Elementreferenz in React kann nicht zugegriffen werden

Question

Ich versuche, mit React ein Modal zu implementieren, wobei ich das Modal relativ zu dem Element positionieren möchte, das es ausgelöst hat (nicht zum übergeordneten Element). In diesem Setup habe ich Zugriff auf einen Verweis auf das auslösende Element, wie Sie hier sehen können

console.log(
          "console button triggering modal offset" + event.target.offsetTop
        );

Aber ich kann nicht auf den Verweis auf das Schema zugreifen, dieser Code generiert einen Fehler

useEffect(() => {
    console.log("loggin ref width   " + modalRef.current.offsetWidth);
  }, [modalRef]);

Ich habe diese Fehlermeldung erhalten

Uncaught TypeError: Cannot read properties of undefined (reading 'offsetWidth')
    at UserParamModal2.js:44:1
    at commitHookEffectListMount (react-dom.development.js:23150:1)
    at commitPassiveMountOnFiber (react-dom.development.js:24926:1)
    at commitPassiveMountEffects_complete (react-dom.development.js:24891:1)
    at commitPassiveMountEffects_begin (react-dom.development.js:24878:1)
    at commitPassiveMountEffects (react-dom.development.js:24866:1)
    at flushPassiveEffectsImpl (react-dom.development.js:27039:1)
    at flushPassiveEffects (react-dom.development.js:26984:1)

Wenn ich die CSSTransition-Komponente entferne, ist alles in Ordnung, Hier ist der vollständige Code. Ich würde mich über jede Hilfe freuen.

import {
  React,
  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 content = (
    <div className={`userparammodal ${props.className}`} ref={ref}>
      {props.children}
    </div>
  );
  return ReactDOM.createPortal(
    content,
    document.getElementById("modal-user-param")
  );
});

const UserParamModal2 = forwardRef((props, ref) => {
  const [visible, setVisible] = useState(false);
  const modalRef = useRef();

  useImperativeHandle(ref, () => {
    return {
      toggle(event) {
        console.log(
          "console button triggering modal offset" + event.target.offsetTop
        );
        setVisible((prev) => {
          return !prev;
        });
      },
    };
  });

  useEffect(() => {
    console.log("loggin ref width   " + modalRef.current.offsetWidth);
  }, [modalRef]);

  return (
    <CSSTransition
      in={visible}
      mountOnEnter
      unmountOnExit
      timeout={200}
      classNames="userparammodal"
    >
      <UserParamModalOverlay {...props} ref={modalRef}></UserParamModalOverlay>
    </CSSTransition>
  );
});

export default UserParamModal2;

Answer 1

您收到错误是因为首次运行 useEffect 时 modalRef.current 为 undefined。只需添加 null 检查或 if(modalRef.current) 条件即可避免此错误。

如果 useEffect 未运行，您可能还需要更新依赖项。

useEffect(() => {
    console.log("loggin ref width   " + modalRef.current?.offsetWidth);
  }, [modalRef.current]);