# react-native: T
URL: https://generaltranslation.com/fr/docs/react-native/api/components/t.mdx
---
title: T
description: Référence de l’API du composant T
---

{/* GÉNÉRÉ AUTOMATIQUEMENT : ne modifiez pas ce fichier directement. Modifiez plutôt le modèle dans content/docs-templates/. */}


## Vue d’ensemble

Le composant `<T>` est la méthode principale de traduction dans `gt-react-native`.

```jsx
<T id="example"> // [!code highlight]
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</T> // [!code highlight]
```

Le composant `<T>` prend en charge la traduction de texte brut ainsi que de structures JSX complexes.
Il permet également de gérer les variables, les pluriels et les traductions dépendantes du contexte.

<Callout>
  **Traduction au build :**
  les traductions `<T>` s’effectuent au build.
  Cela signifie que la traduction a lieu avant le déploiement afin de réduire la latence.
  Veillez à suivre le [guide de déploiement disponible ici](/docs/react-native/tutorials/quickdeploy).
</Callout>


## Référence

### Props

<TypeTable
  type={{
  "children": {
      type: 'any',
      optional: false,
  },
  "id": {
      type: 'string',
      optional: false,
  },
  "context?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Descriptions

| Prop       | Description                                                                                                     |
| ---------- | --------------------------------------------------------------------------------------------------------------- |
| `children` | Le contenu à traduire. Il peut inclure du texte brut ou des structures JSX.                                     |
| `id`       | Un identifiant unique pour la chaîne à traduire. Il garantit une traduction cohérente dans toute l’application. |
| `context`  | Un contexte supplémentaire pour affiner la traduction. Utile pour désambiguïser les formulations ambiguës.      |

### Renvoie

`React.JSX.Element|undefined`, qui contient la traduction affichée ou le contenu de remplacement selon la configuration fournie.

***

## Comportement

### Production

Pendant le processus de CD, tout le contenu enfant de `<T>` est traduit avant le déploiement de votre application.
Cela garantit des temps de chargement rapides pour tous les paramètres régionaux, mais ne permet de traduire que le contenu connu au moment du build.

Une fois générées, les traductions sont soit (1) stockées dans le CDN, soit (2) incluses dans la sortie de build de votre application, selon votre configuration.
Le contenu traduit est ensuite servi à vos utilisateurs.
Si aucune traduction n’est trouvée, le contenu de remplacement est utilisé.

Veillez à suivre le [guide de déploiement ici](/docs/react-native/tutorials/quickdeploy).

### Développement

Pendant le développement, la fonction `<T>` traduit le contenu à la demande.
C’est utile pour voir à quoi ressemblera votre application dans différentes langues.
N’oubliez pas d’ajouter une clé d’API de développement à votre environnement pour activer ce comportement.

Pendant le chargement, `<T>` renvoie `undefined`, sauf si les langues sont similaires (en-US vs en-GB), bien que ce comportement puisse être personnalisé avec les paramètres de rendu.
En cas d’erreur, `<T>` renvoie le contenu d’origine.

Vous constaterez un délai lors de la traduction à la demande en développement.
Ce délai n’apparaîtra pas dans les builds de production, car tout sera déjà traduit.

***

## Exemples

### Utilisation de base

Le composant `<T>` peut traduire des chaînes simples à l’aide d’un `id` et de son contenu enfant.
N’oubliez pas que le composant `<T>` doit être utilisé dans un [`<GTProvider>`](/docs/react-native/api/components/gtprovider) pour accéder aux traductions.

```jsx title="SimpleTranslation.jsx" copy
import { T } from 'gt-react-native';

export default function Greeting() {
    return (
        <T id="greeting"> // [!code highlight]
            Hello, world!
        </T> // [!code highlight]
    );
}
```


### Avec des variables

Le composant `<T>` peut inclure des variables pour insérer du contenu dynamique dans les traductions.

```jsx title="DynamicGreeting.jsx" copy
import { T, Var } from 'gt-react-native';

export default function DynamicGreeting(user) {
    return (
        <T id="greeting">
            Hello, <Var>{user.name}</Var>! // [!code highlight]
        </T>
    );
}
```


### Avec gestion du pluriel

Le composant `<T>` prend également en charge le pluriel via le composant `<Plural>`.

```jsx title="ItemCount.jsx" copy
import { T, Plural } from 'gt-react-native';

export default function ItemCount({ count }) {
    return (
        <T id="item_count">
            <Plural n={count}  // [!code highlight] 
                one={<>You have an item.</>}  // [!code highlight] 
                other={<>You have items.</>}  // [!code highlight] 
            />  // [!code highlight]
        </T>
    );
}
```


### Limites

Le composant `<T>` ne traduit pas les contenus dynamiques.

```jsx title="DynamicContent.jsx" copy
import { T } from 'gt-react-native';

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} // provoquera une erreur // [!code highlight]
        </T>
    );
}
```

La fonction `<T>` traduit les éléments qu’elle contient.

```jsx title="Example.jsx" copy
import { T } from 'gt-react-native';

const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);

const InvalidTranslation = ({ children }) => (<div><b>No translation</b></div>);

export default function Example() {
    return (
        <T>
            <div><b>This is valid!</b></div> // sera traduit // [!code highlight]

            <ValidTranslation> // sera traduit // [!code highlight]
                Hello, world! // [!code highlight]
            </ValidTranslation> // [!code highlight]

            <InvalidTranslation /> // ne sera pas traduit
        </T>
    );
}
```

<Callout>
  **Remarque :** En règle générale, tout contenu situé *littéralement* entre les deux balises `<T>` du fichier sera traduit.
  Vous pouvez toujours ajouter un autre `<T>` pour traduire le contenu qui ne l’est pas encore, même s’il n’est pas recommandé d’imbriquer des composants `<T>`.
</Callout>

***


## Remarques

* Le composant `<T>` est conçu pour traduire le contenu de votre application. C’est la principale méthode de localisation dans `gt-react-native`.
* Utilisez le composant `<T>` pour traduire du texte brut ou des structures JSX, y compris avec des variables et la gestion du pluriel.
* Assurez-vous que le composant `<T>` est bien inclus dans un [`<GTProvider>`](/docs/react-native/api/components/gtprovider) afin d’accéder au contexte de traduction.

## Étapes suivantes

* Pour des fonctionnalités plus avancées comme la traduction à la demande, les variables, le contexte et la gestion du pluriel, consultez la documentation sur les [patterns de conception de `<T>`](/docs/react-native/guides/t).
* Pour traduire des chaînes, consultez [`useGT`](/docs/react-native/api/strings/use-gt).