Vad är forwardRef och useImperativeHandle för?

Question

Accepted Answer

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. ## Varför det är viktigt ```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(); ``` ## Exponera ett anpassat API istället för den råa noden Ibland vill du inte avslöja hela DOM-noden — bara specifika 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(); ``` ## När man ska använda det (sparsamt) 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.