Níl ref a bhíonn pasáilte do chomhpháirt dhúshlantach in ann dul chuig nód DOM taobh istigh de go huachtrach. Tugann forwardRef ar an gcomhpháirt ref a fháil agus a ghreamú do eilimint leanaí. Déanann useImperativeHandle a shonrú cad a nochtann an ref sin.
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();
Uaireanta ní theastaíonn uait an nód DOM ar fad a nochtadh — ach modhanna faoi leith amháin:
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();
Bheith níos fearr leat props/state do chumarsáid. Fág gur nó do refs amháin do riachtanais go fírinneach ordaitheach: bainistiú fócais, scrolling, roghnú téacs, imirt meáin, nó leabhair dhúshlantacha a chomhtháthú. Nóta: in React 19, is féidir ref a rá mar ghnáth-phróp, mar sin níl forwardRef de ghá go minic a thuilleadh.
Leabharlann de cheisteanna agallaimh TF le freagraí mionsonraithe — ó Shóisearach go Sinsearach.
Síntiús