Ö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.
= ( () {
;
});
ref = ();
;
Junior'dan Senior'a detaylı cevaplarla bir BT mülakat soruları kütüphanesi.
Bağış YapBazen 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.