كيفية تشغيل كود قبل إزالة unmount عنصر من الصفحة في React.js؟

import React, {useEffect, useState, useRef} from 'react';
function App() {
  const [active, setActive] = useState(true);
  

  return( 
        <>
            <button onClick={() => setActive(!active)}> Toggle </button> 
            <Box setActive={setActive} active={active} /> 
            {/*  مررنا قيمة active هنا حتى يتمكن الصندوق من تحسسها*/}
        </>
  )
}
function Box({active, setActive}) {
  // هنا اصبح لدينا وصول الى قيمة active
  const [displayMode, setDisplayMode]= useState("HIDE") // نضيف هذه الدالة للتحكم بحالة الزر محلياً داخل الحاوية
  const boxRef = useRef();
  const callBeforeUnmount = () => {
    // use boxRef to do something
    if(boxRef && boxRef.current){
      boxRef.current.style.color="red" // هنا قم بالتعديل مثلا على لون الزر
      setTimeout(()=>{
        setDisplayMode("HIDE") 
      }, 500 ) // ثم قم بإخفاءه
 // ثم قم بإخفاءه
    } // لا يتضح لي بالضبط ما تحاول فعله في هذه الدالة لكن هذا مجرد مثال
    console.log("callBeforeUnmount!!!") 
  }
  
  useEffect(()=> { 
    if(!active){ // نستدعي الدالة فقط عندما يكون الصندوق  نشط
        callBeforeUnmount()
    } else {
      setDisplayMode("SHOW") // اذا كان الأمر هو نشط نقوم بأظهار الزر بتغيير قيمة الهوك مسبق التعريف
    }
  }, [active])  // نضبط الهوك ليستدعي الدالة المطلوبة عندما تتغير قيمة active

  if(displayMode==="HIDE") return null; // نقلنا هذا الكود الى هنا ليقوم بأخفاء الصندوق فقط بدل اخفاء كل شيء
  return <div className="box" ref={boxRef}>red box</div>
}

export default App;

تستطيع ذلك من خلال إستعمالك ل useEffect مع إجراء بعض التعديلات على الكود الخاص بك. لاحظ التعليقات التي وضعتها لك في أماكن التعديل. التغييرات التي أجريناها على كل من المكونين تضمن لنا التحكم بحالة الصندوق محلياً داخل المكون box وكذلك حل مشكلة إخفاء الزر في المكون app  مع الصندوق .

لحل هذه المشكلة يمكنك فعل الآتي:

- بداية قم بنقل boxRef إلى الApp

function App() {
      const [active, setActive] = useState(true);
      const boxRef = useRef(null);
		...
		...
}

ومرّره إلى ال Box ك props:

function App() {
      ...
	  ...

      return (
            <>
                  <button onClick={handleToggle}> Toggle </button>{" "}
                  <Box boxRef={boxRef} />{" "}
            </>
      );
}

وعدّل على Box واجعله كالآتي:

function Box({ boxRef }) {
      return (
            <div className="box" ref={boxRef}>
                  red box
            </div>
      );
}

هكذا نكون قد حافظنا على مرجع العنصر box ضمن المكون App فيمكننا استخدامه قبل أن نقوم بتغيير قيمة الactive. كل ما عليك الآن إنشاء الطريقة handleToggle:

const handleToggle = () => {
            // use boxRef to do something
            console.log(boxRef.current);
            setActive(!active);
      };

واستخدامها في الbutton :

<button onClick={handleToggle}> Toggle </button>

لاحظت أنك تحذف الbutton مع الbox عند الضغط على toggle للمرة الثانية، إذا كنت تريد الحفاظ على الbutton وحذف الbox فقط يجب عليك عوضا عن إرجاع الnull في حال الactive قيمته false أرجع الbutton:

if (!active) return <button onClick={handleToggle}> Toggle </button>;