కస్టమ్ కాంపోనెంట్కు పాస్ చేయబడిన 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 ఇంటర్వ్యూ ప్రశ్నల లైబ్రరీ.
విరాళం