ஒரு தனிப்பயன் கூறுக்கு அனுப்பப்பட்ட 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 ஐ விரும்பவும். உண்மையான கட்டாய தேவைகளுக்கு மட்டுமே ref ஐ பயன்படுத்தவும்: ஃபோகஸ் மேலாண்மை, ஸ்ক்রோல் செய்தல், உரை தேர்வு, மீடியா பிளேব்ரிக்ஸ், அல்லது கட்டாய நூலகங்களை ஒருங்கிணைத்தல். குறிப்பு: React 19 இல், ref ஒரு சாதாரண prop ஆக அனுப்பப்படலாம், எனவே forwardRef பெரும்பாலும் இனி தேவையில்லை.
விரிவான பதில்களுடன் கூடிய IT நேர்காணல் கேள்விகளின் நூலகம் — Junior முதல் Senior வரை.
நன்கொடை