شرح صفوف ومحتوى الفقرة
تُخفي المكونات المخصصة في React بنيتها الداخلية افتراضياً ولا تكشف عقد DOM الخاصة بها للمكون الأب صوناً لاستقلالية كل مكون. وعندما نصمم مكون حقل مشترك مثل <FormInput /> ونرغب عمداً في السماح للأب بتوجيه التركيز إلى عنصر <input> بداخله، نفعّل تمرير المرجع صراحةً.
في مشاريع React 18 نغلّف المكون الفرعي بدالة forwardRef((props, ref) => ...) لتمرير المرجع إلى الحقل الداخلي، بينما أتاح React 19 أيضاً استقبال ref كخاصية مباشرة مع استمرار توافق forwardRef.
HTML
const CustomInput = forwardRef((props, ref) => (
<input ref={ref} placeholder={props.placeholder} />
));
function ParentForm() {
const fieldRef = useRef(null);
return (
<CustomInput ref={fieldRef} placeholder="Email" />
);
}