O ref transmisă unui component personalizat nu ajunge automat la un nod DOM din interior. forwardRef permite unui component să primească o ref și să o atașeze unui element copil. useImperativeHandle personalizează ceea ce acea ref expune.
O ref transmisă unui component personalizat nu ajunge automat la un nod DOM din interior. forwardRef permite unui component să primească o ref și să o atașeze unui element copil. useImperativeHandle personalizează ceea ce acea ref expune.
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();
Uneori nu vrei să divulgi întregul nod DOM — doar metode specifice:
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();
Preferă props/state pentru comunicare. Apelează la refs doar pentru nevoi cu adevărat imperative: gestionarea focusului, derularea, selectarea textului, redarea media sau integrarea bibliotecilor imperative. Notă: în React 19, ref poate fi transmis ca un prop normal, deci forwardRef adesea nu mai este necesar.
O bibliotecă de întrebări de interviu IT cu răspunsuri detaliate — de la Junior la Senior.
Donează