Maison > Questions et réponses > le corps du texte
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;
P粉5461383442023-09-09 09:15:59
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]);