Az egy custom komponensnek átadott ref nem jut el automatikusan az abban lévő DOM csomópontig. A forwardRef lehetővé teszi, hogy egy komponens ref-et kapjon és egy gyerekelemhez csatolja. A useImperativeHandle azt szabályozza, hogy az adott ref mit terjeszt ki.
= ( () {
;
});
ref = ();
;
Néha nem akarod a teljes DOM csomópontot kiterjeszteni — csak bizonyos metódusokat:
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();
Előnyben részesítsd a props/state-t a kommunikációhoz. Csak valódi imperatív szükségletekhez nyúlj ref-hoz: fókusz kezelés, görgetés, szövegkiválasztás, médialejátszás vagy imperatív könyvtárak integrálása. Megjegyzés: a React 19 verzióban a ref normális prop-ként adható át, így a forwardRef gyakran már nem szükséges.