ref proslijeđena custom komponenti ne stigne automatski do DOM čvora unutar nje. forwardRef omogućava komponenti da primi ref i priloži ga na child element. useImperativeHandle prilagođava što taj ref izlaže.
ref proslijeđena custom komponenti ne stigne automatski do DOM čvora unutar nje. forwardRef omogućava komponenti da primi ref i priloži ga na child element. useImperativeHandle prilagođava što taj ref izlaže.
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();
Nekada ne želiš da izložiš cijeli DOM čvor — samo specifične metode:
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();
Preferira props/state za komunikaciju. Posegni za refs samo za stvarno imperativne potrebe: upravljanje fokusom, scrollanje, odabir teksta, reprodukciju medija ili integraciju imperativnih biblioteka. Napomena: u React 19, ref se može proslijediti kao obični prop, pa forwardRef često više nije potreban.
Knjižnica IT pitanja za razgovore za posao s detaljnim odgovorima — od Juniora do Seniora.
Doniraj