Mukautettuun komponenttiin välitetty ref ei automaattisesti saavuta sen sisäisen DOM-solmun. forwardRef antaa komponentin vastaanottaa ref:in ja liittää sen alielementtiin. useImperativeHandle mukauttaa, mitä tämä ref paljastaa.
Mukautettuun komponenttiin välitetty ref ei automaattisesti saavuta sen sisäisen DOM-solmun. forwardRef antaa komponentin vastaanottaa ref:in ja liittää sen alielementtiin. useImperativeHandle mukauttaa, mitä tämä ref paljastaa.
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();
Joskus et halua paljastaa koko DOM-solmua — vain tiettyjä metodeja:
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();
Suosi props/state-viestintää. Turvaudu ref:iin vain todellisiin imperatiivisiin tarpeisiin: fokuksen hallinta, vierittäminen, tekstin valinta, median toisto tai pakotettujen kirjastojen integrointi. Huomio: React 19:ssä ref voidaan välittää tavallisena prop:ina, joten forwardRef ei usein enää ole pakollinen.
Kirjasto IT-haastattelukysymyksiä yksityiskohtaisine vastauksineen — Juniorista Senioriin.
Lahjoita