Come usare i riferimenti React con TypeScript in Function e Class Components

Blog

In questo post, spieghiamo come usare Riferimenti di reazione con TypeScript in componenti di funzioni e classi.



Creazione di riferimenti fortemente tipizzati nei componenti della funzione

Il |_+_| hook può essere utilizzato per accedere a tutte le proprietà e i metodi di un elemento.

useRef

È comunemente usato quando abbiamo bisogno di invocare metodi su un elemento in modo imperativo. Di seguito è riportato un esempio:



const element = React.useRef(null); // can access all the properties and methods of `element` via `element.current` ... return ( );

Ci stiamo concentrando su un |_+_| quando il componente viene eseguito per la prima volta.

Il tipo di |_+_| viene dedotto come |_+_| se la modalità rigorosa è attiva; in caso contrario, viene dedotto come |_+_|. Un errore di tipo si verifica anche quando |_+_| viene referenziato se la modalità rigorosa è attiva.



Non ideale.

Possiamo definire esplicitamente il tipo dell'elemento restituito da |_+_| passando un parametro di tipo generico:

function Search() { const input = React.useRef(null); React.useEffect(() => { if (input.current) { input.current.focus(); } }, []); return ( ); };

Quindi, possiamo digitare esplicitamente il ref nel |_+_| componente come segue:

input

L'errore di tipo ora scompare.

#react #typescript #javascript #web-development #developer

www.carlrippon.com

Come usare i riferimenti React con TypeScript in Function e Class Components

Scopri come usare i riferimenti React con TypeScript nei componenti di funzioni e classi. I riferimenti vengono creati utilizzando React.createRef() e collegati agli elementi React tramite l'attributo ref. TypeScript: JavaScript digitato su qualsiasi scala. TypeScript è un linguaggio open source che si basa su JavaScript, uno degli strumenti più utilizzati al mondo, aggiungendo definizioni di tipo statico. I tipi forniscono un modo per descrivere la forma di un oggetto, fornendo una migliore documentazione e consentendo a TypeScript di verificare che il codice funzioni correttamente.