Pose una domanda e ottieni un riassunto del documento facendo riferimento a questa pagina e al provider AI di tua scelta
Il contenuto di questa pagina è stato tradotto con un'IA.
Vedi l'ultima versione del contenuto originale in ingleseSe hai un’idea per migliorare questa documentazione, non esitare a contribuire inviando una pull request su GitHub.
Collegamento GitHub alla documentazioneCopia il Markdown del documento nella porta-documenti
import IntegrationsNav from '/components/IntegrationsNav.astro'
import ReadMore from '/components/ReadMore.astro'
Costruisci il tuo sito web Astro senza rinunciare al tuo framework UI preferito. Crea Isole Astro con il tuo framework UI preferito.
Integrazione UI Framework ufficlali
Astro supporta molti tra i framework più diffusi, tra cui React, Preact, Svelte, Vue, SolidJS, AlpineJS e Lit con integrazioni ufficiali.
Scopri altri framework mantenuti dalla community nella nostra directory apposita.
Installazione delle integrazioni
Una o più di queste integrazioni Astro possono essere installate e configurate nel tuo progetto.
Visualizza la Guida alle integrazioni per maggiori dettagli sull'installazione e la configurazione delle integrazioni Astro.
:::tip Vuoi vedere un esempio del framework che hai scelto? Visita astro.new e seleziona uno dei modelli di framework. :::
Utilizzo dei componenti di framework UI
Usa i componenti del tuo framework JavaScript preferito nelle tue pagine, layout e componenti Astro proprio come se fossero dei componenti Astro! Tutti i tuoi componenti possono coesistere in /src/components o possono essere organizzati nel modo che preferisci.
Per utilizzare un componente di un framework, importalo dal suo percorso relativo nello script del componente Astro. Quindi, utilizza il componente insieme ad altri componenti, elementi HTML ed espressioni simili a JSX nel modello del componente.
Copiare il codice nella clipboard
---import MyReactComponent from '../components/MyReactComponent.jsx';---<html> <body> <h1>Usa componenti React direttamente in Astro!</h1> <MyReactComponent /> </body></html>Per impostazione predefinita, i componenti del framework verranno visualizzati solo sul server, come HTML statico. Ciò è utile per creare modelli di componenti che non sono interattivi ed evita di inviare JavaScript non necessario al client.
Componenti interattivi idratanti
Un componente di framework UI può essere reso interattivo (idratato) utilizzando una direttiva client:*. Si tratta di attributi del componente che determinano quando il JavaScript del componente deve essere inviato al browser.
Con tutte le direttive client tranne client:only, il tuo componente verrà prima renderizzato sul server per generare HTML statico. Il componente JavaScript verrà inviato al browser in base alla direttiva scelta. Il componente si idraterà e diventerà interattivo.
Copiare il codice nella clipboard
---// Example: idratare componenti di framework UI nel browser.import InteractiveButton from '../components/InteractiveButton.jsx';import InteractiveCounter from '../components/InteractiveCounter.jsx';import InteractiveModal from '../components/InteractiveModal.svelte';---<!-- Il JS di questo componente inizierà l'importazione al caricamento della pagina --><InteractiveButton client:load /><!-- Il JS di questo componente non verrà inviato al client fino a chel'utente non scorre verso il basso e il componente non è visibile nella pagina --><InteractiveCounter client:visible /><!-- Questo componente non verrà visualizzato sul server, ma verrà visualizzato sul client quando la pagina viene caricata --><InteractiveModal client:only="svelte" />Il framework JavaScript (React, Svelte, ecc.) necessario per eseguire il rendering del componente verrà inviato al browser insieme al JavaScript del componente. Se due o più componenti di una pagina utilizzano lo stesso framework, il framework verrà inviato una sola volta.
:::note[Accessibilità] La maggior parte dei modelli di accessibilità specifici del framework dovrebbero funzionare allo stesso modo quando questi componenti vengono utilizzati in Astro. Assicurati di scegliere una direttiva client che garantisca che qualsiasi JavaScript relativo all'accessibilità venga caricato correttamente ed eseguito al momento opportuno! :::
Direttive di idratazione disponibili
Sono disponibili diverse direttive di idratazione per i componenti del framework dell'interfaccia utente: client:load, client:idle, client:visible, client:media={QUERY} e client:only={FRAMEWORK}.
Consulta la nostra pagina riferimento alle direttive per una descrizione completa di queste direttive sull'idratazione e il loro utilizzo.
Combinare più frameowrk
Puoi importare ed eseguire il rendering di componenti da più framework nello stesso componente Astro.
Copiare il codice nella clipboard
---// Esempio: combinazione di più componenti del framework sulla stessa pagina.import MyReactComponent from '../components/MyReactComponent.jsx';import MySvelteComponent from '../components/MySvelteComponent.svelte';import MyVueComponent from '../components/MyVueComponent.vue';---<div> <MySvelteComponent /> <MyReactComponent /> <MyVueComponent /></div>:::caution Solo i componenti Astro (.astro) possono contenere componenti provenienti da più framework. :::
Passaggio di proprietà ai componenti dei framework
Puoi passare proprietà dai componenti Astro ai componenti dei framework:
Copiare il codice nella clipboard
---import TodoList from '../components/TodoList.jsx';import Counter from '../components/Counter.svelte';---<div> <TodoList initialTodos={["learn Astro", "review PRs"]} /> <Counter startingCount={1} /></div>:::caution[passare funzioni come proprietà] Puoi passare una funzione come proprietà a un componente di un framework, ma questo funzionerà solo durante il rendering del server. Se provi a utilizzare la funzione in un componente idratato (ad esempio, come gestore eventi), si verificherà un errore.
Questo perché le funzioni non possono essere serializzate (trasferite dal server al client) da Astro. :::
Passaggio dei figli ai componenti del framework
All'interno di un componente Astro, puoi passare dei figli ai componenti di un framework. Ogni framework ha un proprio meccanismo per fare riferimento a componenti figli: React, Preact e Solid usano tutti un oggetto speciale chiamato children, mentre Svelte e Vue usano l'elemento <slot />.
Copiare il codice nella clipboard
---import MyReactSidebar from '../components/MyReactSidebar.jsx';---<MyReactSidebar> <p>Ecco una barra laterale con del testo e un pulsante.</p></MyReactSidebar>Inoltre, puoi utilizzare slot nominati per raggruppare insieme figli specifici.
Per React, Preact e Solid questi slot verranno convertiti in proprietà di livello superiore. I nomi degli slot che utilizzano kebab-case verranno convertiti in camelCase.
Copiare il codice nella clipboard
---import MySidebar from '../components/MySidebar.jsx';---<MySidebar> <h2 slot="title">Menu</h2> <p>Ecco una barra laterale con del testo e un pulsante.</p> <ul slot="social-links"> <li><a href="https://twitter.com/astrodotbuild">Twitter</a></li> <li><a href="https://github.com/withastro">GitHub</a></li> </ul></MySidebar>Copiare il codice nella clipboard
// src/components/MySidebar.jsxexport default function MySidebar(props) { return ( <aside> <header>{props.title}</header> <main>{props.children}</main> <footer>{props.socialLinks}</footer> </aside> )}Per Svelte e Vue è possibile fare riferimento a questi slot utilizzando un elemento <slot> con l'attributo name. I nomi degli slot che utilizzano kebab-case verranno conservati.
Copiare il codice nella clipboard
// src/components/MySidebar.svelte<aside> <header><slot name="title" /></header> <main><slot /></main> <footer><slot name="social-links" /></footer></aside>Componenti della struttura inseriti l'uno nell'altro
All'interno di un file Astro, i componenti figlio del framework possono anche essere componenti idratati. Ciò significa che puoi inserire ricorsivamente componenti l'uno nell'altro da uno qualsiasi di questi framework.
Copiare il codice nella clipboard
---import MyReactSidebar from '../components/MyReactSidebar.jsx';import MyReactButton from '../components/MyReactButton.jsx';import MySvelteButton from '../components/MySvelteButton.svelte';---<MyReactSidebar> <p>Ecco una barra laterale con del testo e un pulsante.</p> <div slot="actions"> <MyReactButton client:idle /> <MySvelteButton client:idle /> </div></MyReactSidebar>:::caution Ricorda: gli stessi file dei componenti del framework (ad esempio .jsx, .svelte) non possono mescolare più framework. :::
Ciò ti consente di creare intere "app" nel tuo framework JavaScript preferito e renderle, tramite un componente principale, in una pagina Astro.
:::note Il rendering dei componenti Astro viene sempre eseguito in HTML statico, anche quando includono componenti del framework idratati. Ciò significa che puoi passare solo proprietà che non eseguono alcun render in HTML. Passare gli "oggetti di rendering" di React ai componenti del framework da un componente Astro non funzionerà, perché i componenti Astro non possono fornire il comportamento di runtime del client richiesto da questo modello. Utilizza invece gli slot con nome. :::
Posso utilizzare gli Astro Components all'interno dei miei Framework Components?
Qualsiasi componente del framework dell'interfaccia utente diventa un´"isola" di tale framework. Questi componenti devono essere scritti interamente come codice valido per quel framework, utilizzando solo le proprie importazioni e pacchetti. Non è possibile importare componenti .astro in un componente del framework dell'interfaccia utente (ad esempio .jsx o .svelte).
Puoi, tuttavia, utilizzare il pattern Astro <slot /> per passare il contenuto statico generato dai componenti Astro come figli ai componenti del framework all'interno di un Componente .astro.
Copiare il codice nella clipboard
---import MyReactComponent from '../components/MyReactComponent.jsx';import MyAstroComponent from '../components/MyAstroComponent.astro';---<MyReactComponent> <MyAstroComponent slot="name" /></MyReactComponent>Posso idratare i componenti Astro?
Se provi a idratare un componente Astro con un modificatore client:, riceverai un errore.
I componenti Astro sono componenti di template solo HTML senza runtime lato client. Puoi però utilizzare un tag <script> nel modello del componente Astro per inviare JavaScript al browser che viene eseguito nell'ambito globale.
Ulteriori informazioni sui tag <script> lato client nei componenti Astro