Za kaj služita forwardRef in useImperativeHandle?

Question

Accepted Answer

Ref, ki je prosljeđena prilagojeni komponenti, **ne** avtomatsko doseže DOM-vozlišče v njej. **`forwardRef`** omogoči komponenti, da prejme ref in jo pritrdi na podrejeni element. **`useImperativeHandle`** prilagodi *kaj* ta ref razkrije. ## Zakaj je to pomembno ```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(); ``` ## Razkritje prilagojenega API-ja namesto surovenega vozlišča Včasih ne želiš razkriti celotnega DOM-vozlišča — le posebne metode: ```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(); ``` ## Kdaj ga uporabiti (redko) Prednostno daj props/state za komunikacijo. Posegni po refs samo za res **imperativne** potrebe: upravljanje fokusa, drsenje, izbor besedila, predvajanje medija ali integracija imperativnih knjižnic. Opomba: v **React 19** je `ref` mogoče prenesti kot običajna rekvizita, zato `forwardRef` pogosto ni več potreben.