En ref som sendes til en egendefinert komponent når ikke automatisk en DOM-node inne i den. forwardRef lar en komponent motta en ref og feste den til et barnelement. useImperativeHandle tilpasser hva denne reff-en eksponerer.
En ref som sendes til en egendefinert komponent når ikke automatisk en DOM-node inne i den. forwardRef lar en komponent motta en ref og feste den til et barnelement. useImperativeHandle tilpasser hva denne reff-en eksponerer.
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();
Noen ganger ønsker du ikke å eksponere hele DOM-noden — bare spesifikke 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();
Foretrekk props/state for kommunikasjon. Bruk refs kun for genuint imperative behov: fokusadministrasjon, scrolling, tekstvalg, medieoppspilling, eller integrering av imperative biblioteker. Merk: i React 19 kan ref sendes som en normal prop, så forwardRef er ofte ikke lenger nødvendig.
Et bibliotek av IT-intervjuspørsmål med detaljerte svar — fra Junior til Senior.
Doner