In genere, il flusso di rendering di un component in React prevede che al cambio di un valore tra le props o lo state il component venga renderizzato da zero. Nella maggioranza dei casi questo flusso è più che sufficiente, ma esistono casi in cui non è così. Pensiamo ad esempio quando dobbiamo impostare il focus su un campo. In questi renderizzare nuovamente il component non è ammissibile, quindi dobbiamo ricorrere all'utilizzo del DOM.
Per ottenere un riferimento agli oggetti del DOM dobbiamo prima creare un oggetto ref e memorizzarlo in una variabile, e poi in fase di rendering assegnare l'oggetto del DOM alla variabile.
class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return <div ref={this.myRef} />; } }
Per accedere all'oggetto del DOM, dobbiamo sfruttare la proprietà current di myRef.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Installare le Web App site extension tramite una pipeline di Azure DevOps
Utilizzare Tailwind CSS all'interno di React: primi componenti
Utilizzare i primary constructor di C# per inizializzare le proprietà
Hosting di componenti WebAssembly in un'applicazione Blazor static
Usare una container image come runner di GitHub Actions
Generare token per autenicarsi sulle API di GitHub
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Eseguire operazioni con timeout in React
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Generare file per il download da Blazor WebAssembly
Semplificare il deployment di siti statici con Azure Static Web App