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
Definire lo stile CSS in base alle dimensioni del container
Utilizzare politiche di resiliency con Azure Container App
Generare file PDF da Blazor WebAssembly con iText
Gestione degli environment per il deploy con un workflow di GitHub
Utilizzare i primary constructor di C# per inizializzare le proprietà
Monitorare i server on-premises con Azure Arc
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Usare un KeyedService di default in ASP.NET Core 8
Eseguire query verso tipi non mappati in Entity Framework Core
Eseguire le GitHub Actions offline
Sottoscrizione agli eventi sul contenitore in JavaScript