如何從父級打開模態引導程序並自行關閉它

Question

我想從帶有道具的父組件打開一個模式，然后在完成所有操作后關閉它並通知父級以防他想再次打開。

const ModalChild = (props) => {

  const [Activate, setActivate] = useState(props.Activate);

  const toggle = () => setActivate(!Activate);


  useEffect(() => {

     setActivate(props.Activate)

   }
    }, []);



  <Modal isOpen={Activate} toggle={false} >
       <text>hello {props.hey}<text>
   </Modal>
}

和父母組件，像這樣：

const Accountlist= () => {

   const [Activate, setActivate] = useState(false);
    const toggle = (value) => {
        setActivate(true)
    }


render(
   <button onClick={() => toggle(value)} />
    <ModalEdit props={Activate}/>
)}

請問，有人知道嗎？

Answer 1

如果是我，我會這樣做。

const Accountlist= () => {

   const [activate, setActivate] = useState(false);

   const toggleActivate = (value) => {
        setActivate(value);
    }

return [
   <button onClick={() => toggleActivate(!activate)} />,
    <ModalEdit isActivated={activate} toggleActivate={toggleActivate} />
]}

在子組件處。

const ModalChild = ({ isActivated, toggleActivate }) => {


  useEffect(() => {
     toggleActivate(!isActivated);
  }, []);



  <Modal isOpen={isActivated} toggle={() => toggleActivate(false)} >
       <text>hello {props.hey}<text>
   </Modal>
}

我不確定您要做什么，但 rest 的邏輯我將留給您。