Autore:
    Creazione:2025-02-07Ultimo aggiornamento:2025-06-29

    Annidamento / Riferimento a Contenuti Annidati

    Come Funziona l'Annidamento

    In Intlayer, l'annidamento viene realizzato 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 tramite la sua chiave.

    Configurazione del Nesting

    Per configurare il nesting nel tuo progetto Intlayer, prima definisci il contenuto di base che desideri riutilizzare. Quindi, 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 da annidare in un altro dizionario:

    firstDictionary.content.ts
    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;

    Configurazione dell'Annidamento

    To use nested content in a React component, leverage the useIntlayer hook from the react-intlayer package. This hook retrieves the correct content based on the specified key. Here's an example of how to use it:

    **/*.tsx
    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>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

    Utilizzo dell'Annidamento con React Intlayer

    Per utilizzare contenuti annidati in un componente React, sfrutta il hook useIntlayer del pacchetto react-intlayer. Questo hook recupera il contenuto corretto in base alla chiave specificata. Ecco un esempio di come utilizzarlo:

    **/*.tsx
    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 Annidato Completo: {JSON.stringify(fullNestedContent)}
        {/* Output: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}
      </p>
      <p>
        Valore Annidato Parziale: {partialNestedContent}
        {/* Output: 0 */}
      </p>
    </div>
  );
};

export default NestComponent;

    Risorse Aggiuntive

    Per informazioni più dettagliate sulla configurazione e sull'utilizzo, consulta le seguenti risorse:

    Queste risorse forniscono ulteriori approfondimenti sulla configurazione e sull'utilizzo di Intlayer in diversi ambienti e con vari framework.

    File
    Markdown