Özel bir bileşene iletilen ref, içindeki DOM düğümüne otomatik olarak ulaşmaz. forwardRef, bir bileşenin ref almasını ve onu alt öğeye eklemesini sağlar. useImperativeHandle, bu ref'in neyi ortaya koyduğunu özelleştirir.
Özel bir bileşene iletilen ref, içindeki DOM düğümüne otomatik olarak ulaşmaz. forwardRef, bir bileşenin ref almasını ve onu alt öğeye eklemesini sağlar. useImperativeHandle, bu ref'in neyi ortaya koyduğunu özelleştirir.
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();
Bazen tüm DOM düğümünü sızdırmak istemezsiniz — yalnızca belirli yöntemler:
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();
İletişim için props/state'i tercih edin. Ref'lere yalnızca gerçekten zorunlu ihtiyaçlar için başvurun: odak yönetimi, kaydırma, metin seçimi, medya oynatma veya zorunlu kütüphaneleri entegre etme. Not: React 19'da ref normal bir prop olarak iletilebilir, bu nedenle forwardRef genellikle artık gerekli değildir.
Junior'dan Senior'a detaylı cevaplarla bir BT mülakat soruları kütüphanesi.
Bağış Yap