Išorinės nuorodos ref, perduota pasirinktiniam komponentui, ne automatiškai pasiekia DOM mazgą jo viduje. forwardRef leidžia komponentui priimti ref ir priskirti jį vaiko elementui. useImperativeHandle suasmenina, ką ta ref atkleidžia.
Išorinės nuorodos ref, perduota pasirinktiniam komponentui, ne automatiškai pasiekia DOM mazgą jo viduje. forwardRef leidžia komponentui priimti ref ir priskirti jį vaiko elementui. useImperativeHandle suasmenina, ką ta ref atkleidžia.
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();
Kartais nenorėtumėt atskleisti visą DOM mazgą — tik konkrečius metodus:
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();
Pageidautina propso/būsena naudoti bendravimui. Siekite ref tik tikrai imperatyviais poreikiais: fokuso valdymas, slinkimas, teksto pasirinkimas, medijos grojimas arba imperatyvinių bibliotekų integravimas. Pastaba: React 19 versijoje ref gali būti perduotas kaip įprasta prop, todėl forwardRef dažnai nebereikalingas.