Nidificazione / Riferimento a Contenuti Subordinati

Come Funziona la Nidificazione

In Intlayer, la nidificazione viene realizzata tramite la funzione nest, che consente di fare riferimento e riutilizzare contenuti da un altro dizionario. Invece di duplicare i contenuti, è possibile puntare a un modulo di contenuto esistente usando la sua chiave.

Configurare la Nidificazione

Per configurare la nidificazione nel tuo progetto Intlayer, devi prima definire il contenuto di base che desideri riutilizzare. Successivamente, in un modulo di contenuto separato, utilizzi la funzione nest per importare quel contenuto.

Dizionario di Base

Di seguito è riportato un esempio di un dizionario di base con contenuti nidificati:

import { type Dictionary } from "intlayer";const firstDictionary = {  key: "key_of_my_first_dictionary",  content: {    content: "content",    subContent: {      contentNumber: 0,      contentString: "string",    },  },} satisfies Dictionary;export default firstDictionary;

Fare Riferimento con Nest

Ora crea un altro modulo di contenuto che utilizza la funzione nest per fare riferimento al contenuto sopra. Puoi fare riferimento all'intero contenuto o a un valore specifico nidificato:

import { nest, type Dictionary } from "intlayer";const myNestingContent = {  key: "key_of_my_second_dictionary",  content: {    // Riferisce l'intero dizionario:    fullNestedContent: nest("key_of_my_first_dictionary"),    // Riferisce un valore specifico nidificato:    partialNestedContent: nest(      "key_of_my_first_dictionary",      "subContent.contentNumber"    ),  },} satisfies Dictionary;export default myNestingContent;

Come secondo parametro, puoi specificare un percorso verso un valore nidificato all'interno di quel contenuto. Quando non viene fornito alcun percorso, viene restituito l'intero contenuto del dizionario referenziato.

Utilizzare la Nidificazione con React Intlayer

Per utilizzare i contenuti nidificati in un componente React, sfrutta il hook useIntlayer dal pacchetto react-intlayer. Questo hook recupera il contenuto corretto in base alla chiave specificata. Ecco un esempio di utilizzo:

import type { FC } from "react";import { useIntlayer } from "react-intlayer";const NestComponent: FC = () => {  const { fullNestedContent, partialNestedContent } = useIntlayer(    "key_of_my_second_dictionary"  );  return (    <div>      <p>        Contenuto Nidificato Completo: {JSON.stringify(fullNestedContent)}        {/* Output: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}      </p>      <p>        Valore Parziale Nidificato: {partialNestedContent}        {/* Output: 0 */}      </p>    </div>  );};export default NestComponent;

Risorse Aggiuntive

Per informazioni più dettagliate su configurazione e utilizzo, consulta le seguenti risorse:

• Documentazione CLI Intlayer
• Documentazione React Intlayer
• Documentazione Next Intlayer

Queste risorse forniscono ulteriori approfondimenti sull'impostazione e l'utilizzo di Intlayer in diversi ambienti e framework.