Išorinės nuorodos ref, perduota pasirinktiniam komponentui, ne automatiškai pasiekia DOM mazgą jo viduje. forwardRef leidžia komponentui priimti ir priskirti jį vaiko elementui. suasmenina, ta atkleidžia.
Išorinės nuorodos ref, perduota pasirinktiniam komponentui, ne automatiškai pasiekia DOM mazgą jo viduje. forwardRef leidžia komponentui priimti ir priskirti jį vaiko elementui. suasmenina, ta atkleidžia.
refuseImperativeHandlerefconst 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.
IT pokalbių klausimų biblioteka su išsamiais atsakymais — nuo Junior iki Senior.
Paaukoti