Accesso ai nodi DOM, misurazione e messa a fuoco
Utilizzi i ref per accedere ai nodi DOM, mettere a fuoco gli input dopo il rendering e misurare le dimensioni degli elementi in modo semplice e adatto ai principianti.
Accesso ai nodi DOM, misurazione e messa a fuoco è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 2 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 3 lezioni in totale.
Perché accedere al DOM?
Obiettivo: usare useRef per accedere in sicurezza ai nodi DOM dopo il rendering.
- Associare un ref a un elemento JSX
- Leggere ref.current negli effetti
- Mettere a fuoco o misurare gli elementi
Azioni dopo il rendering
Il DOM è disponibile dopo il rendering. Usare useEffect per azioni come focus() o per misurare le dimensioni. Mantenere il rendering puro.
Demo: mettere a fuoco automaticamente un input
Associare un ref all'input e chiamare focus() all'interno di useEffect([]), in modo che venga eseguito dopo il primo paint.
<div id="root"></div>
Misurare dopo il rendering
Per misurare un elemento, leggere getBoundingClientRect() da ref.current in un effetto. Aggiornare il valore al ridimensionamento per mantenerlo aggiornato.
Demo: misurare la larghezza
Salviamo un ref del riquadro e leggiamo la sua larghezza al montaggio e quando la finestra viene ridimensionata. Il cleanup rimuove il listener.
<div id="root"></div>
Suggerimenti e insidie
Suggerimenti:
- Associare i ref a nodi DOM reali, ad esempio input e div.
- Leggere e agire in useEffect (dopo il paint).
- Eseguire sempre il cleanup dei listener aggiunti.
Verifica: mettere a fuoco dopo il rendering
Riepilogo
Riepilogo: associare un ref a un nodo DOM, quindi usarlo dopo il rendering per chiamare focus() o leggere le dimensioni tramite getBoundingClientRect(). Eseguire il cleanup dei listener aggiunti.
Domande Frequenti
La lezione «Accesso ai nodi DOM, misurazione e messa a fuoco» è gratuita?
Sì — il testo completo di «Accesso ai nodi DOM, misurazione e messa a fuoco» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 3 lezioni in totale.
Cosa imparerò in «Accesso ai nodi DOM, misurazione e messa a fuoco»?
Utilizzi i ref per accedere ai nodi DOM, mettere a fuoco gli input dopo il rendering e misurare le dimensioni degli elementi in modo semplice e adatto ai principianti. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare React Academy?
Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 3.
Quanto tempo richiede la lezione «Accesso ai nodi DOM, misurazione e messa a fuoco»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione React Academy?
Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Conservare valori senza eseguire nuovamente il rendering
- Accesso ai nodi DOM, misurazione e messa a fuoco
- Ref mutabili per timer e ID