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
Gestire eccezioni nei plugin di Semantic Kernel in ASP.NET Core Web API
Inference di dati strutturati da testo con Semantic Kernel e ASP.NET Core Web API
Eseguire query per recuperare il padre di un record che sfrutta il tipo HierarchyID in Entity Framework
.NET Aspire per applicazioni distribuite
Scrivere selettori CSS più semplici ed efficienti con :is()
Generare HTML a runtime a partire da un componente Razor in ASP.NET Core
.NET Conference Italia 2024
Escludere alcuni file da GitHub Secret Scanning
Utilizzare un numero per gestire la concorrenza ottimistica con SQL Server ed Entity Framework
Utilizzare Azure Cosmos DB con i vettori
Loggare le query più lente con Entity Framework
Generare velocemente pagine CRUD in Blazor con QuickGrid