Vue d'ensemble

Le composant <Static> est utilisé pour gérer la fragmentation des phrases et le contenu réutilisable sans sacrifier l'accord, la conjugaison ni les changements d'ordre des mots. Dans l'exemple suivant, deux traductions distinctes sont créées : « The beautiful boy plays with the ball » et « The beautiful girl plays with the ball ».

function getSubject(gender) { 
  return gender === "male" ? "boy" : "girl" 
}

<T>
  Le beau <Static>{getSubject(gender)}</Static> joue avec le ballon.
</T>

Le composant <Static> indique à l’outil CLI de déréférencer un appel de fonction et de recenser l’ensemble du contenu susceptible d’être renvoyé par cette fonction, en traitant chaque instruction return comme si elle était enveloppée dans un composant <T>.

Pour plus d’informations, consultez les notes de version de gt-next@6.8.0.

Référence

Props

Description

Valeur de retour

React.JSX.Element contenant le contenu rendu par l'appel de fonction, chaque résultat possible donnant lieu à une entrée de traduction distincte.

Fonctionnement

Analyse au moment du build

Pendant le processus de build, l’outil CLI analyse les fonctions encapsulées dans des composants <Static> et crée des entrées de traduction distinctes pour chaque valeur de retour possible. Cela permet de gérer correctement l’accord grammatical et l’ordre des mots dans différentes langues.

Exigences relatives aux fonctions

Les fonctions utilisées au sein de composants <Static> doivent renvoyer un contenu statique qui peut être déterminé au moment de la compilation. La syntaxe prise en charge comprend :

• Littéraux de chaînes de caractères, de nombres et de booléens
• Expressions JSX avec des composants <Static> et <Var> imbriqués
• Opérateurs ternaires
• Instructions conditionnelles (if/else)
• Appels à d'autres fonctions statiques

Exemples

Utilisation de base

Utilisez <Static> pour gérer le contenu dynamique qui influe sur la structure de la phrase.

import { T, Static } from 'gt-react';

function getSubject(gender) { 
  return gender === "male" ? "garçon" : "fille" 
}

export default function Example({ gender }) {
  return (
    <T>
      {getSubject(gender) === "garçon" ? "Le" : "La"} <Static>{getSubject(gender)}</Static> est {getSubject(gender) === "garçon" ? "beau" : "belle"}.
    </T>
  );
}

Cela crée deux entrées de traduction :

• "Le garçon est beau"
• "La fille est belle"

Avec des variables

Combinez <Static> avec <Var> pour du contenu dynamique dans les retours de fonctions statiques.

import { T, Static, Var } from 'gt-react';

function getGreeting(title) {
  return (
    <>
      Bonjour, <Static>{getTitle(title)}</Static>. Comment allez-vous, <Var>{name}</Var> ?
    </>
  );
}

export default function Greeting({ title, name }) {
  return (
    <T>
      <Static>{getGreeting(title)}</Static>
    </T>
  );
}

Plusieurs composants <Static>

Soyez prudent lorsque vous utilisez plusieurs composants <Static>, car ils multiplient les entrées de traduction.

import { T, Static } from 'gt-react';

function getSubject(gender) { 
  return gender === "male" ? "garçon" : "fille" 
}

function getObject(toy) { 
  return toy === "ball" ? "ballon" : "crayon"
}

export default function PlayExample({ gender, toy }) {
  return (
    <T>
      <Static>{getSubject(gender)}</Static> joue avec <Static>{getObject(toy)}</Static>.
    </T>
  );
}

Cela crée quatre entrées de traduction (2 × 2 combinaisons) :

• "boy plays with the ball"
• "boy plays with the crayon"
• "girl plays with the ball"
• "girl plays with the crayon"

Syntaxe de fonction prise en charge

function getExamples(key) {
  switch (key) {
    case "literals":
      if (condition1) {
        return "Le garçon"
      } else if (condition2) {
        return 22
      } else {
        return true
      }
    case "jsx":
      return (
        <>
          Bonjour <Static>{getTitle(title)}</Static>. Comment allez-vous, <Var>{name}</Var> ?
        </>
      );
    case "ternary":
      return condition ? "Le garçon" : "La fille"      
    case "function_calls":
      return otherStaticFunction();
  }
}

Limites

Impact sur les performances

L’utilisation de <Static> peut entraîner une croissance exponentielle du nombre d’entrées de traduction. Chaque composant <Static> supplémentaire multiplie le nombre total de traductions.

Contraintes relatives aux fonctions

• Les fonctions doivent pouvoir être analysées au moment du build
• Tous les chemins de retour doivent être déterminables statiquement
• Le contenu dynamique renvoyé par les fonctions doit utiliser des composants <Var>
• Ne prend actuellement en charge que les appels de fonction en tant que children directs

Contenu variable

Tout contenu dynamique ou variable dans les valeurs de retour de fonctions statiques doit être encapsulé dans des composants <Var>.

// Correct
function getContent() {
  return <>Hello, <Var>{userName}</Var>!</>;
}

// Incorrect - provoquera des erreurs de build
function getContent() {
  return <>Hello, {userName}!</>;
}

Remarques

• Le composant <Static> est conçu pour gérer la fragmentation des phrases tout en conservant une correction grammaticale dans les différentes langues.
• Tenez toujours compte de l’impact sur les performances lorsqu’il y a plusieurs composants <Static> dans une même traduction.
• Traitez chaque instruction return dans les fonctions statiques comme si elle était encapsulée dans un composant <T>.
• Utilisez <Static> avec discernement : privilégiez des structures de traduction plus simples dans la mesure du possible.

Étapes suivantes

• Pour le contenu variable dans les traductions, consultez le composant <Var>.
• Pour le composant principal de traduction, consultez <T>.