Saya cuba melaksanakan modal menggunakan React di mana saya mahu meletakkan modal relatif kepada elemen yang mencetuskannya (bukan elemen induk). Dalam persediaan ini saya mempunyai akses kepada rujukan kepada elemen pencetus seperti yang anda boleh lihat di sini

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

Tetapi saya tidak dapat mengakses rujukan kepada skema, kod ini menghasilkan ralat

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

Saya mendapat mesej ralat ini

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)

Apabila saya mengalih keluar komponen CSSTransition, semuanya baik-baik saja, Berikut adalah kod lengkap. Saya akan menghargai sebarang bantuan.

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 = ( 
 {props.children} 
 ); 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 (    ); }); export default UserParamModal2;