لا تصل ref المُمررة إلى مكون مخصص تلقائياً إلى عقدة DOM بداخله. forwardRef يسمح لمكون باستقبال ref وربطه بعنصر فرعي. useImperativeHandle يخصص ما الذي يكشفه ذلك الـ ref.
إعادة توجيه ref إلى عقدة DOM
jsx
= ( () {
;
});
ref = ();
;
لا تصل ref المُمررة إلى مكون مخصص تلقائياً إلى عقدة DOM بداخله. forwardRef يسمح لمكون باستقبال ref وربطه بعنصر فرعي. useImperativeHandle يخصص ما الذي يكشفه ذلك الـ ref.
= ( () {
;
});
ref = ();
;
أحياناً لا تريد أن تكشف العقدة كاملة — فقط طرق معينة:
const FancyInput = forwardRef(function FancyInput(props, ref) {
const inner = useRef(null);
useImperativeHandle(ref, () => ({
focus: () => inner.current.focus(),
clear: () => { inner.current.value = ""; },
}), []);
return <input ref={inner} {...props} />;
});
// parent: fancyRef.current.focus(); fancyRef.current.clear();
فضّل props/state للتواصل. استخدم refs فقط للاحتياجات الضرورية فعلاً: إدارة التركيز، التمرير، تحديد النص، تشغيل الوسائط، أو دمج المكتبات الضرورية. ملاحظة: في React 19، يمكن تمرير ref كـ prop عادي، لذلك غالباً لم يعد forwardRef مطلوباً.