المرجع كدعامة

في React، غالبًا ما نُحدّث واجهة المستخدم إعلانيًا باستخدام الحالة والخصائص. ولكن في بعض الأحيان، نحتاج إلى وصول مباشر إلى عنصر DOM، مثل تركيز إدخال، أو قياس حجمه، أو بدء حركة. وهنا يأتي دورref يأتي في.

ما هوref ؟

أref (اختصار لـ "مرجع") يُعطينا خطًا مباشرًا إلى عقدة DOM أو مثيل مكون. يشبه الأمر إخبار React:

"مرحبًا، هل يمكنني الحصول على عنصر DOM الفعلي حتى أتمكن من القيام بشيء ما به؟"

يجعل هذا من الممكن التفاعل مع DOM بشكل مباشر، دون المرور بعملية عرض React المعتمدة على الحالة.

• السطر 4: إنشاء مرجع جديد باستخدامuseRef() .

• الأسطر 6-8: الاستخداماتuseEffect للاتصالfocus() على إدخال عند تركيب المكون.

• الخط 10: يعلقref الى<input> العنصر الذي يمنحنا إمكانية الوصول المباشر إليه.

ما هيforwardRef وuseImperativeHandle ؟

عندما نريد تمرير مرجع من مكون رئيسي إلى مكون فرعي، فإن مكونات الوظيفة لا تقبل بشكل افتراضيref لجعل هذا ممكنًا، يوفر React أداة مساعدة تسمىforwardRef .

• forwardRef : يسمح للمكون الفرعي بتلقي ...