كيفية إستدعاء دالة من مكون ابن في React؟

أولاً ، يجب أن تعلم أن هذه ليست طريقة التعامل مع الأشياء في React. عادة ما تريد القيام به هو نقل الأشياء إلى المكونات الأبناء في props مخصصة لذلك وليس العكس، وتمرير الإشعارات من الأبناء إلى المكونات الأباء في الأحداث events (أو الأفضل من ذلك إستخدام dispatch). ولكن إذا كان لا بد من دالة من مكون فرعي، فيمكنك استخدام refs. ومن الأفضل أن تفكر مجددًا في تصميم التطبيق وتحسن طريقة تعامل المكونات مع بعضها البعض.

في السابق ، كانت المراجع refs مدعومة فقط للمكوناتمن نوع class. مع ظهور React Hooks، لم يعد هذا هو الحال وأصبح من الممكن إستخدامها مع function components أيضًا. وهنا إقتباس من موقع رياكت الرسمي يوضح ذلك.

اقتباس

Previously, refs were only supported for Class-based components. With the advent of React Hooks, that's no longer the case

في البداية يجب تجهيز المكون الابن والدالة في داخلة كالتالي:

const { forwardRef, useImperativeHandle } = React;

// يتم إرسال ref كقيمة ثانية إلى الدالة التي يتم إستدعائها
const Child = forwardRef((props, ref) => {

  // بهذه الطريقة هنا سيمكنك أن تستخدم الدالة من المكون الأب
  // حيث يتم إستدعائها من قبل ref مخصص كما سترى لاحقًا
  useImperativeHandle(ref, () => ({
    getLog() {
      console.log("Called from Child");
    }
  }));
  
  return <p>Text</p>;
});

هنا مرجع لشرح الخطاف useImperativeHandle من موسوعة حسوب.

بعد ذلك نقوم بإستدعاء الدالة من داخل المكون الأب بإستخدام useRef كالتالي:

const { useRef } = React;
const Parent = () => {
  // بإستخدام `useRef()` سيمكنك أن تستخدم الدالة getLog 
  // كما لو كنت تسدعيها من ملف جافاسكريبت
  const childRef = useRef();

  return (
    <>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.getLog()}>Get Log</button>
    </>
  );
};

بالتوفيق.