Pose una domanda e ottieni un riassunto del documento facendo riferimento a questa pagina e al provider AI di tua scelta
Integrando il server MCP Intlayer al tuo assistente AI, puoi recuperare tutti i documenti direttamente da ChatGPT, DeepSeek, Cursor, VSCode, ecc.
Vedi la documentazione del server MCPIl 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
Integrazione React: Documentazione Hook useIntlayer
Questa sezione fornisce una guida dettagliata sull'uso dell'hook useIntlayer all'interno delle applicazioni React, permettendo una localizzazione efficiente dei contenuti.
Importare useIntlayer in React
L'hook useIntlayer può essere integrato nelle applicazioni React importandolo in base al contesto:
Componente Client:
typescriptCopiare il codiceCopiare il codice nella clipboard
import { useIntlayer } from "react-intlayer"; // Usato nei componenti React lato client
Componente Server:
Parametri
L'hook accetta due parametri:
- key: La chiave del dizionario per recuperare il contenuto localizzato.
- locale (opzionale): La localizzazione desiderata. Di default è la localizzazione del contesto se non specificata.
Dizionario
Tutte le chiavi del dizionario devono essere dichiarate all'interno dei file di dichiarazione dei contenuti per migliorare la sicurezza dei tipi ed evitare errori. Puoi trovare le istruzioni di configurazione qui.
Esempio di utilizzo in React
Dimostrazione dell'hook useIntlayer all'interno di un componente React:
Copiare il codice nella clipboard
import type { FC } from "react";import { ClientComponentExample, ServerComponentExample } from "@components";import { IntlayerProvider } from "react-intlayer";import { useIntlayer, IntlayerServerProvider } from "react-intlayer/server";import { Locales } from "intlayer";const App: FC<{ locale: Locales }> = ({ locale }) => { const content = useIntlayer("homepage", locale); return ( <> <p>{content.introduction}</p> <IntlayerProvider locale={locale}> <ClientComponentExample /> </IntlayerProvider> <IntlayerServerProvider locale={locale}> <ServerComponentExample /> </IntlayerServerProvider> </> );};
Copiare il codice nella clipboard
import type { FC } from "react";import { useIntlayer } from "react-intlayer";const ComponentExample: FC = () => { const content = useIntlayer("component-example"); return ( <div> <h1>{content.title}</h1> <p>{content.description}</p> </div> );};
Copiare il codice nella clipboard
import { useIntlayer } from "react-intlayer/server";jsx fileName="src/components/ServerComponentExample.tsx" codeFormat="typescript"import { useIntlayer } from "react-intlayer/server";const ServerComponentExample = () => { const content = useIntlayer("server-component"); return ( <div> <h1>{content.title}</h1> <p>{content.description}</p> {/* descrizione del contenuto */} </div> );};
Gestione degli attributi
Quando si localizzano gli attributi, accedere ai valori del contenuto in modo appropriato:
Copiare il codice nella clipboard
<button title={content.buttonTitle.value}>{content.buttonText}</button>
Risorse aggiuntive
- Editor Visivo Intlayer: Per un'esperienza di gestione dei contenuti più intuitiva, fare riferimento alla documentazione dell'editor visivo qui.
Questa sezione si rivolge specificamente all'integrazione del hook useIntlayer nelle applicazioni React, semplificando il processo di localizzazione e garantendo la coerenza dei contenuti tra le diverse località.
Risorse Aggiuntive
- Intlayer Visual Editor: Per un'esperienza di gestione dei contenuti più intuitiva, fare riferimento alla documentazione dell'editor visuale qui.
Questa sezione si concentra specificamente sull'integrazione del hook useIntlayer nelle applicazioni React, semplificando il processo di localizzazione e garantendo la coerenza dei contenuti tra le diverse località.
Cronologia del Documento
- 5.5.10 - 2025-06-29: Storia iniziale