لماذا ref.current عبارة عن null في React.js؟

عادةً ما يرجع ref React غير محدد أو فارغ "undefined" عندما نحاول الوصول إلى خاصيته الحالية قبل عرض عنصر DOM المقابل. للتتخلص من هذا ، قم بالوصول إلى ref في  useEffect hooks  أو عند تشغيل حدث.

مثال توضيحي

import {useRef, useEffect} from 'react';

export default function App() {
  const ref = useRef();

  console.log(ref.current); // undefined هنا غير معرف

  useEffect(() => {
    const el2 = ref.current;
    console.log(el2); // element here العنصر هنا 
  }, []);

  return (
    <div>
      <div ref={ref}>
        <h2>مرحبا بك في أكادمية حسوب</h2>
      </div>
    </div>
  );
}

يمكن تمرير useRef hooks () بقيمة أولية كــ"argument". يقوم hook بإرجاع كائن ref القابل للتغيير الذي تتم تهيئة الخاصية الحالية له إلى argument التي تم تمريرها.

اقتباس

لم نمرر قيمة أولية إلى useRef لذلك تم تعيين الخاصية الحالية على undefined.

إذا مررنا قيمة فارغة إلى hook ، فستكون خاصيته الحالية null إذا تم الوصول إليها على الفور.

اقتباس

استخدمنا  useEffect hooks لأننا نريد التأكد من أن ref قد تم تعيينه على العنصر وأن العنصر قد تم تحويله إلى DOM.

إذا حاولنا الوصول إلى الخاصية الحالية لـ ref مباشرة في المكون ، فسنحصل على undefined لأن ref لم يتم إعداده ولم يتم تقديم عنصر div.

import {useRef, useEffect} from 'react';

export default function App() {
  const ref = useRef();

  console.log(ref.current); // undefined هتا المرجع غير معرف

  useEffect(() => {
    const el2 = ref.current;
    console.log(el2); //  هنا العنصر
  }, []);

  const handleClick = () => {
    console.log(ref.current); //  مرجع العنصر
  };

  return (
    <div>
      <div ref={ref}>
        <h2>مرحبا بك في أكادمية حسوب</h2>
      </div>

      <button onClick={handleClick}>حسنا</button>
    </div>
  );
}

في هذه الحالة أنت تحاول الوصول إلى قيمة useRef قبل أن يتم إظهار محتويات شجرة DOM أو مايعرف بـ DOM Rendering وبالتالي تحصل على القيمة null أو undefined لأنه لا وجود للعنصر div حتى يتم إسناد قيمته إلى containerRef.

إن React يقوم بإسناد قيمة .current الخاصة بالكائن ref إلى العقدة أو الوسم الملائم لها ضمن شجرة Dom في HTML وإذا حاولنا طباعة القيمة مباشرةً قبل أن يقوم المتصفح بإظهار عقد HTML سنحصل على هذا الخطأ دوماً.

لذلك يمكنك الوصول إلى القيمة من خلال استعمال useEffect كالتالي:

useEffect(()=>{
 const element = contrainerRef.current;
 console.log(element);
})

أو من خلال الأحداث events:

const handleClick = () => {
 console.log(containerRef.current);
}