En ref som skickats till en anpassad komponent når inte automatiskt en DOM-nod inuti den. forwardRef låter en komponent ta emot en ref och koppla den till ett underordnat element. useImperativeHandle anpassar vad den ref:en exponerar.
En ref som skickats till en anpassad komponent når inte automatiskt en DOM-nod inuti den. forwardRef låter en komponent ta emot en ref och koppla den till ett underordnat element. useImperativeHandle anpassar vad den ref:en exponerar.
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();
Ibland vill du inte avslöja hela DOM-noden — bara specifika metoder:
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();
Föredra props/state för kommunikation. Använd refs endast för genuint imperativa behov: fokushantering, scrollning, textval, mediauppspelning eller integrering av imperativa bibliotek. Notering: i React 19 kan ref skickas som en vanlig prop, så forwardRef krävs ofta inte längre.
Ett bibliotek med IT-intervjufrågor och detaljerade svar — från Junior till Senior.
Donera