کسٹم کمپوننٹ کو منتقل کیا گیا ref خودکار طور پر اس کے اندر DOM نوڈ تک نہیں پہنچتا۔ forwardRef کمپوننٹ کو ref وصول کرنے اور اسے بچے کے عنصر میں منسلک کرنے دیتا ہے۔ useImperativeHandle اس بات کو کسٹمائز کرتا ہے کہ وہ ref کیا بے نقاب کرتا ہے۔
کسٹم کمپوننٹ کو منتقل کیا گیا ref خودکار طور پر اس کے اندر DOM نوڈ تک نہیں پہنچتا۔ forwardRef کمپوننٹ کو ref وصول کرنے اور اسے بچے کے عنصر میں منسلک کرنے دیتا ہے۔ useImperativeHandle اس بات کو کسٹمائز کرتا ہے کہ وہ ref کیا بے نقاب کرتا ہے۔
const TextInput = forwardRef(function TextInput(props, ref) {
return <input ref={ref} {...props} />; // parent's ref now points to the <input>
});
// parent can focus the inner input:
const ref = useRef(null);
<TextInput ref={ref} />;
// ref.current.focus();
کبھی کبھی آپ مکمل DOM نوڈ کو ظاہر نہیں کرنا چاہتے — صرف مخصوص طریقے:
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 اب اکثر ضروری نہیں ہے۔
تفصیلی جوابات کے ساتھ IT انٹرویو سوالات کی ایک لائبریری — جونیئر سے سینئر تک۔
عطیہ دیں