Hvad bruges forwardRef og useImperativeHandle til?

Question

Accepted Answer

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. ## Viderestilling af en ref til en DOM-node ```jsx const TextInput = forwardRef(function TextInput(props, ref) { return ; // parent's ref now points to the }); // parent can focus the inner input: const ref = useRef(null); ; // ref.current.focus(); ``` ## Eksponering af et brugerdefineret API i stedet for den råe node Sommetider vil du ikke lække hele DOM-noden — kun specifikke metoder: ```jsx const FancyInput = forwardRef(function FancyInput(props, ref) { const inner = useRef(null); useImperativeHandle(ref, () => ({ focus: () => inner.current.focus(), clear: () => { inner.current.value = ""; }, }), []); return ; }); // parent: fancyRef.current.focus(); fancyRef.current.clear(); ``` ## Hvornår man skal bruge det (sparsomt) 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.