Tidak dapat mengakses rujukan elemen dalam reaksi

Question

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 = (
    <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

Anda mendapat ralat kerana keadaan modalRef.current 为 undefined。只需添加 null 检查或 if(modalRef.current) boleh dielakkan apabila menjalankan useEffect buat kali pertama.

Jika useEffect tidak berjalan, anda juga mungkin perlu mengemas kini kebergantungan.

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