forwardRef تمرير الـ refs
آخر تحديث: 2026-11-03
forwardRef تمرير الـ refs
لا تتلقّى المكوّنات الدالية ref افتراضياً. و forwardRef يمرّر الـ ref الذي يمرّره الأب إلى عقدة DOM داخل المكوّن، فتستطيع المكوّنات الملفوفة مثل حقل نص مخصّص أو زر أن تُركَّز وتُقاس تماماً كالعناصر الأصلية. ويقبل React 19 خاصية ref مباشرة، لكن الإصدارات الأقدم تحتاج forwardRef. ويجب أن ينتهي الـ ref عند عنصر DOM حقيقي، فتمريره إلى مكوّن عادي لا يمرّره بدوره يترك الأب بلا شيء.
| المجموعة | الآثار الجانبية والأداء |
|---|---|
| النوع | واجهة برمجية |
| منذ الإصدار | React 16.3 |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
const FancyInput = forwardRef(function FancyInput(props, ref) {
return <input ref={ref} {...props} /> // اربطها بـ DOM الحقيقي
})
// الاستخدام: <FancyInput ref={inputRef} />⚙️ المعاملات
| render function | دالة بالشكل (props, ref) => JSX. الوسيط الثاني هو الـ ref المارّ من الأب، ويجب إرفاقه بعقدة DOM حقيقية أو بمكوّن يمرّره بدوره. |
|---|
القيمة المرجعة：يعيد مكوّناً جديداً capable على تمرير ref: فـ ref.current في الأب يشير إلى العقدة التي أرفقتها دالة العرض.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
بعد النقر يركَّز حقل الإدخال ذو الإطار الأزرق ويُفرَغ محتواه — فالـ ref مرّ عبر غلاف FancyInput ووصل إلى الحقل الحقيقي في داخله.💡 النقاط الأساسية
💡 نصيحة في React 19 يمكن للمكوّن الدالي تلقّي prop ref مباشرة، فلا حاجة إلى forwardRef بعد الآن؛ أما الإصدارات الأقدم فتحتاجه.
ℹ️ ملاحظة يجب إرفاق وسيط الـ ref بعنصر DOM حقيقي؛ وإرفاقه بمكوّن عادي لا يمرّره يعني أن الأب لا يتلقّى شيئاً.
⚠️ تحذير لا تسيء استعمال الـ refs الممرَّرة للتتدخّل داخل مكوّن ابن — فضّل الخصائص التصريحية، وادمج useImperativeHandle معها حين تحتاج واجهة إلزامية أغنى.
🏷️ المزيد من الآثار والأداء
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س لماذا لا يستطيع المكوّن الدالي تلقّي ref مباشرة؟
ج لأن للمكوّن الدالي لا نسخة يرتبط بها ref؛ وقد أبعد React 18 وما قبله الـ ref عن props، فكان على forwardRef أن يمرّره صراحةً.
س ما الذي تغيّر في React 19؟
ج أصبح الـ ref prop عادية، فيستطيع المكوّن الدالي ببساطة أن يكتب function Cmp({ ref })، ولم يعد forwardRef مطلوباً (مع أنه ما زال يعمل).
س كيف يختلف useImperativeHandle عن التمرير المباشر؟
ج التمرير المباشر يكشف عقدة DOM كاملة؛ أما useImperativeHandle فيتيح لك تحديد مجموعة الدوال المكشوفة (focus و clear وغيرها) وإخفاء التنفيذ.
