问在呈现模式后调用函数

EN

import React, { useState, useEffect, useRef } from 'react';

export function MyDiv({ handleModalLoad }) {
  const myDivRef = useRef(null);

  //  only run when this component renders
  useEffect(() => {

    //  get value from custom attribute
    const { customAttribute } = myDivRef.current.dataset;
    if (!customAttribute) return;

    //  run the function needed
    handleModalLoad(customAttribute);
  }, []);

  return (
    <div data-custom-attribute="VALUE" ref={myDivRef}>
      <h2>This is my div in modal</h2>
    </div>
  );
}

export default function App() {
  const [modalOpen, setModalOpen] = useState(false);
  const [myValue, setMyValue] = useState('');
  return (
    <>
      <div>
        <h1>{`Click button to get: ${myValue}`}</h1>
        <button onClick={() => setModalOpen(true)}>OPEN MODAL</button>
        {modalOpen && <MyDiv handleModalLoad={(value) => setMyValue(value)} />}
      </div>
    </>
  );
}

<div
  custom-attribute="VALUE"
  ref={modalRef}
>
    {handleModalLoad()}
</div>

const someRef=useRef(null)

useEffect(()=>{
     handleModalLoad()
},[someRef])

{
isModalOpen && <div
  custom-attribute="VALUE"
  ref={someRef}
>
</div>
}