Autore:
    Creazione:2026-07-30Ultimo aggiornamento:2026-07-30

    Contenuto Basato su Selezione / Select in Intlayer

    Come funziona Select

    In Intlayer, il contenuto basato su selezione si ottiene tramite la funzione select, che mappa valori stringa arbitrari al rispettivo contenuto. È l'equivalente di un messaggio {value, select, …} di ICU, o di un'istruzione switch nel codice della tua applicazione.

    Usa select quando il discriminante è una stringa in formato libero: uno stato, un piano, una piattaforma, un ruolo. Per gli altri discriminanti, Intlayer fornisce nodi dedicati:

    Discriminante Nodo
    Una quantità enu()
    Un booleano cond()
    Un genere gender()
    Qualsiasi altra stringa select()

    Impostazione del Contenuto Basato su Selezione

    Per impostare il contenuto basato su selezione nel tuo progetto Intlayer, crea un modulo di contenuto che includa le tue definizioni di selezione. Di seguito sono riportati esempi in vari formati.

    **/*.content.ts
    import { select, type Dictionary } from "intlayer";

const myPostContent = {
  key: "my_key",
  content: {
    publishStatus: select({
      draft: "This post is a draft",
      published: "This post is live",
      scheduled: "This post is scheduled",
      fallback: "Unknown status", // Opzionale
    }),
  },
} satisfies Dictionary;

export default myPostContent;
    Se non viene dichiarato un fallback, l'ultima chiave dichiarata verrà utilizzata come fallback quando il valore fornito non corrisponde ad alcun caso dichiarato: lo stesso contratto di cond() e gender().

    Sicurezza dei Tipi

    L'argomento accettato viene dedotto dai casi dichiarati:

    • Senza un fallback, sono accettati solo i casi dichiarati: un errore di battitura è un errore di tipo.
    • Con un fallback, viene accettata qualsiasi stringa (il fallback copre i valori non corrispondenti), mentre i casi dichiarati offrono comunque l'autocompletamento.

    Perché non un semplice oggetto?

    È allettante dichiarare un semplice oggetto e indicizzarlo con il valore a runtime:

    tsx
    // ❌ Non fare questoconst { publishStatus } = useIntlayer("my_key");return <p>{publishStatus[publishType]}</p>;

    Il compilatore di Intlayer analizza il tuo codice sorgente per eliminare il contenuto inutilizzato e minimizzare le chiavi rimanenti. Un accesso computato dinamico (obj[expr]) non può essere risolto staticamente, per cui l'intero ramo viene contrassegnato come opaco: viene mantenuto nel bundle e le sue chiavi restano non minimizzate.

    Con select(), la risoluzione del caso avviene all'interno di una chiamata a funzione anziché come accesso a una proprietà. Il compilatore vede un singolo accesso di campo statico e ottimizza il nodo esattamente come enu(), cond() o gender():

    tsx
    // ✅ Fai questoconst { publishStatus } = useIntlayer("my_key");return <p>{publishStatus(publishType)}</p>;

    Utilizzo del Contenuto Basato su Selezione

    Per utilizzare il contenuto basato su selezione all'interno di un componente React, importa e usa l'hook useIntlayer dal pacchetto react-intlayer. Questo hook recupera il contenuto per la chiave specificata e ti consente di passare un valore per selezionare l'output appropriato.

    **/*.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const PostStatus: FC = () => {
const { publishStatus } = useIntlayer("my_key");

return (
  <div>
    <p>
      {
        /* Output: This post is a draft */
        publishStatus("draft")
      }
    </p>
    <p>
      {
        /* Output: This post is live */
        publishStatus("published")
      }
    </p>
    <p>
      {
        /* Output: Unknown status */
        publishStatus("Archived")
      }
    </p>
  </div>
);
};

export default PostStatus;

    Combinare Select con altri nodi

    Ciascun caso contiene un nodo di contenuto completo, pertanto select si combina con t(), insert(), md() e gli altri:

    **/*.content.ts
    import { insert, select, t, type Dictionary } from "intlayer";const myPostContent = {  key: "my_key",  content: {    publishStatus: select({      draft: insert(        t({          en: "{{name}} saved a draft",          fr: "{{name}} a enregistré un brouillon",          it: "{{name}} ha salvato una bozza",        })      ),      published: insert(        t({          en: "{{name}} published the post",          fr: "{{name}} a publié l’article",          it: "{{name}} ha pubblicato il post",        })      ),      fallback: insert(        t({          en: "{{name}} updated the post",          fr: "{{name}} a mis à jour l’article",          it: "{{name}} ha aggiornato il post",        })      ),    }),  },} satisfies Dictionary;export default myPostContent;
    tsx
    publishStatus("draft")({ name: "Alice" }); // Output: Alice ha salvato una bozza

    Migrazione da ICU select

    I messaggi che utilizzano l'argomento select di ICU vengono importati come nodi select:

    text
    {publishType, select, draft {draft} published {published} other {Unknown}}

    diventa

    typescript
    select(  {    draft: "draft",    published: "published",    fallback: "Unknown",  },  "publishType");

    Il caso ICU other viene rinominato in fallback, che è il nome canonico in Intlayer per il caso catch-all. Il secondo argomento registra il nome della variabile ICU affinché il messaggio ritorni esattamente alla stessa stringa ICU al momento dell'esportazione.

    Un ICU select i cui casi sono valori di genere (male / female / other) viene invece importato come nodo gender.

    Risorse Aggiuntive

    Per informazioni più dettagliate sulla configurazione e l'uso, fai riferimento alle seguenti risorse:

    Queste risorse offrono ulteriori approfondimenti sulla configurazione e l'utilizzo di Intlayer in vari ambienti e framework.

    Plurale
    Enumerazione