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
Aggiungere temi custom a Blazor
Eseguire chiamate hedging gRPC con ASP.NET Core 6
Le novità di Entity Framework Core 6
Creare automaticamente una pipeline YAML da una sua definizione in Azure DevOps
Iniettare servizi in un hosted service di ASP.NET Core
Personalizzare la creazione dell'utenze Azure B2C tramite API connector
Utilizzare l'API del browser fetch
Creare un'istanza di Azure SQL Database tramite ARM
Serializzare e deserializzare un tipo DateOnly con System.Text.Json
Scoprire cosa succede in un layer di un Dockerfile
Ottimizzare il codice JavaScript con i Shorthand Patterns - prima parte
Serializzare e deserializzare un tipo TimeOnly con System.Text.Json
I più letti di oggi
- Monitorare contemporaneamente i cambiamenti di più proprietà dello scope di AngularJS
- "welcome to the modern web development" con @dbochicchio e @kasuken, ora live per iniziare #PWAConfIT parleremo di #PWA e di come costruire applicazioni web moderne per tutto il pomeriggio. Seguiteci live su https://aspit.co/PWAConf-20 #aspilive
- Sfruttare le dipendenze con il model binding di ASP.NET Web Forms
- rilasciato #vs2017.5, con importanti aggiornamenti sulla velocità di caricamento dei progetti, supporto a C# 7.2 e nuove feature di Xamarin.disponibile inoltre anche #VS for #Mac, con sign integrato delle app iOS.altre informazioni su https://aspit.co/bkk
- Disabilitare un pulsante in Blazor durante il salvataggio