Ogni component di React deve avere un solo nodo padre. Spesso questo nodo è un tag div o span o table o altro ancora. Esistono tuttavia dei casi in cui questo component non può essere un tag HTML. Analizziamo il prossimo esempio.
class MyTable extends React.Component { render() { return ( <table> <tr> <MyColumns /> </tr> </table> ); } }
Il component Columns renderizza una serie di colonne all'interno della riga. Se questo component utilizzasse un qualunque tag HTML come nodo principale (un div ad esempio), all'interno del tag tr avremmo un div che al suo interno avrebbe i tag td. Un tale codice HTML non è valido, ma JSX mette a disposizione una funzionalità che permette di avere un nodo padre che non viene poi renderizzato in HTML: fragment.
class MyColumns extends React.Component { render() { return ( <> <td>Column1</td> <td>Column2</td> <td>Column3</td> </> ); } }
Nel momento in cui React andrà a renderizzare il component, il tag aperto/chiuso verrà eliminato e quindi il codice generato sarà valido.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare Copilot con Azure Cosmos DB
Filtrare i dati di una QuickGrid in Blazor con una drop down list
Gestione degli stili CSS con le regole @layer
Ordinare randomicamente una lista in C#
Ottenere un token di accesso per una GitHub App
Usare i servizi di Azure OpenAI e ChatGPT in ASP.NET Core con Semantic Kernel
Applicare un filtro per recuperare alcune issue di GitHub
Creare una libreria CSS universale: Immagini
Eseguire query in contemporanea con EF
Il nuovo controllo Range di Blazor 9
Rendere i propri workflow e le GitHub Action utilizzate più sicure
Utilizzare l'espressione if inline in una pipeline di Azure DevOps
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Utilizzare il pattern matching per semplificare le espressioni
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Utilizzare requestAnimationFrame per animazioni fluide