En ref der sendes til en brugerdefineret komponent når ikke automatisk til en DOM-node inde i den. forwardRef lader en komponent modtage en ref og vedhæfte den til et barnelement. useImperativeHandle tilpasser hvad denne ref eksponerer.
En ref der sendes til en brugerdefineret komponent når ikke automatisk til en DOM-node inde i den. forwardRef lader en komponent modtage en ref og vedhæfte den til et barnelement. useImperativeHandle tilpasser hvad denne ref 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();
Sommetider vil du ikke lække hele DOM-noden — kun specifikke 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();
Fortrinsvis props/state til kommunikation. Grib kun efter refs for ægte imperative behov: fokusadministration, scrolling, tekstudvælgelse, medieafspilning eller integrering af imperative biblioteker. Bemærk: i React 19 kan ref sendes som en normal prop, så forwardRef er ofte ikke længere påkrævet.
Et bibliotek af IT-interviewspørgsmål med detaljerede svar — fra Junior til Senior.
Donér