కస్టమ్ కాంపోనెంట్కు పాస్ చేయబడిన ref దానిలోని DOM నోడ్కు స్వయంచాలకంగా చేరుకోదు. forwardRef కాంపోనెంట్కు ref ను పొందటానికి మరియు దానిని చైల్డ్ ఎలిమెంట్కు సంযుక్త చేయటానికి అనుమతిస్తుంది. useImperativeHandle ఆ ref ఏమి బహిర్గతం చేస్తుందో అనుకూలీకరిస్తుంది.
= ( () {
;
});
ref = ();
;
కొన్నిసార్లు మీరు సંపూర్ణ 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 తరచుగా ఇకపై అవసరం లేదు.