Impossible d'accéder à la référence de l'élément dans React

Question

J'essaie d'implémenter un modal en utilisant React où je veux positionner le modal par rapport à l'élément qui l'a déclenché (pas l'élément parent). Dans cette configuration j'ai accès à une référence à l'élément déclencheur comme vous pouvez le voir ici

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

Mais je n'arrive pas à accéder à la référence au schéma, ce code génère une erreur

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

J'ai reçu ce message d'erreur

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)

Quand je supprime le composant CSSTransition, tout va bien, Voici le code complet. J'apprécierais toute aide.

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

Vous obtenez l'erreur car la condition modalRef.current 为 undefined。只需添加 null 检查或 if(modalRef.current) peut être évitée lors de la première exécution de useEffect.

Si useEffect n'est pas en cours d'exécution, vous devrez peut-être également mettre à jour les dépendances.

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