Ref przekazany do komponentu niestandardowego nie trafia automatycznie do węzła DOM wewnątrz niego. forwardRef pozwala komponentowi otrzymać ref i dołączyć go do elementu podrzędnego. useImperativeHandle dostosowuje co ten ref wyświetla.
= ( () {
;
});
ref = ();
;
Biblioteka pytań rekrutacyjnych IT ze szczegółowymi odpowiedziami — od Juniora do Seniora.
WesprzyjCzasami nie chcesz wyciekać całego węzła DOM — tylko określone metody:
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();
Preferuj props/state do komunikacji. Sięgaj po refs tylko do naprawdę imperatywnych potrzeb: zarządzanie fokusem, przewijanie, wybór tekstu, odtwarzanie mediów lub integracja bibliotek imperatywnych. Uwaga: w React 19 ref można przekazać jako normalny prop, więc forwardRef często już nie jest wymagany.