# General Translation React SDKs (gt-react, gt-next): T
URL: https://generaltranslation.com/fr/docs/react/reference/components/t.mdx
---

title: T
description: Traduisez les éléments enfants JSX sur place avec General Translation gt-react. Référence de l’API pour T.

---

Le composant `<T>` est la principale méthode de traduction de `gt-react`. Il traduit ses éléments enfants JSX — texte brut et balisage imbriqué — selon le paramètre régional actif, sur place.

*Disponible dans `gt-react`, `gt-next`, `gt-tanstack-start` et `gt-react-native`. Les exemples importent depuis `gt-react` ; importez plutôt depuis le package de votre framework.*

## Vue d’ensemble [#overview]

Placez tout JSX statique dans `<T>` pour qu’il soit traduit dans le paramètre régional actif. Utilisez des composants variables tels que [`<Var>`](/docs/react/reference/components/var) et [`<Num>`](/docs/react/reference/components/num) pour les valeurs dynamiques.

```tsx
<T>
  Today, I went to
  <p>
    the <b>store</b> to buy some <i>groceries</i>.
  </p>
</T>
```

*Remarque : `<T>` doit être rendu dans un [`<GTProvider>`](/docs/react/reference/components/gt-provider) afin de pouvoir accéder aux traductions. Pour les chaînes autonomes, utilisez plutôt [`useGT`](/docs/react/reference/hooks/use-gt).*

## Comment cela fonctionne [#how-it-works]

* **Traduction au build.** En production, le contenu à l’intérieur d’un `<T>` est traduit à l’étape de build (ou de déploiement), avant que les utilisateurs ne chargent l’application. Cela permet de préserver de bonnes performances à l’exécution, mais seul le contenu connu au moment du build peut être traduit. Les traductions générées sont servies depuis le CDN ou le résultat du build de votre application, et reviennent au contenu d’origine lorsqu’une traduction est absente.
* **À la demande en développement.** Lorsqu’une clé API de développement est configurée, `<T>` traduit à la demande afin que vous puissiez prévisualiser les paramètres régionaux pendant le prototypage. Pendant le chargement d’une traduction, `<T>` renvoie `undefined` (sauf si la source et la cible partagent la même langue, comme `en-US` et `en-GB`) ; en cas d’erreur, il renvoie le contenu d’origine. Ce délai n’existe pas dans les builds de production.
* **Traduit les descendants, pas les éléments enfant dynamiques.** `<T>` traduit littéralement le JSX écrit entre ses balises. Le contenu transmis via une variable (par exemple, `{greeting}`) ne peut pas être traduit et provoque une erreur — encapsulez les valeurs dynamiques dans un composant variable. Règle pratique : tout ce qui se trouve littéralement entre les deux balises `<T>` est traduit. Évitez d’imbriquer des composants `<T>`.

## Props [#props]

| Prop                                  | Description                                                      | Type        | Facultatif | Par défaut |
| ------------------------------------- | ---------------------------------------------------------------- | ----------- | ---------- | ---------- |
| [`children`](#children)               | Le contenu JSX à traduire.                                       | `ReactNode` | Non        | —          |
| [`$context`](#context)                | Contexte de désambiguïsation destiné aux traducteurs.            | `string`    | Oui        | —          |
| [`$id`](#id)                          | Identifiant stable de l’entrée.                                  | `string`    | Oui        | —          |
| [`$maxChars`](#max-chars)             | Longueur maximale de la traduction.                              | `number`    | Oui        | —          |
| [`$requiresReview`](#requires-review) | Indique que la traduction doit être approuvée avant utilisation. | `boolean`   | Oui        | —          |

### `children` [#children]

**Type** `ReactNode` · **Obligatoire**

Le contenu à traduire. Il peut s’agir de texte brut ou d’une structure JSX, y compris des composants variables et de branchement. Le contenu doit être statique ; les valeurs dynamiques doivent être encapsulées dans un composant variable.

### `$context` [#context]

**Type** `string` · **Facultatif**

Contexte supplémentaire permettant d’affiner la traduction. Utile pour lever les ambiguïtés afin que les traducteurs restituent le sens recherché.

### `$id` [#id]

**Type** `string` · **Facultatif**

Un identifiant stable pour l’entrée de traduction, qui garantit la cohérence des traductions et permet de retrouver facilement l’entrée dans le Translation Editor.

### `$maxChars` [#max-chars]

**Type** `number` · **Facultatif**

Le nombre maximal de caractères autorisé pour la traduction. La bibliothèque applique cette limite et tronque les sorties plus longues.

### `$requiresReview` [#requires-review]

**Type** `boolean` · **Facultatif**

Indique que le contenu traduit doit être approuvé avant d’être utilisé, afin qu’il soit mis en attente de révision au lieu d’être diffusé automatiquement.

## Exemples [#examples]

```tsx title="Greeting.tsx"
import { T } from 'gt-react';

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

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

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

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

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

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

export default function DynamicContent({ greeting }) {
  return (
    <T>
      {greeting} // ❌ les éléments enfants dynamiques ne peuvent pas être traduits — encapsulez dans <Var> // [!code highlight]
    </T>
  );
}
```

```tsx title="Descendants.tsx"
import { T } from 'gt-react';

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

export default function Example() {
  return (
    <T>
      <div><b>This is valid!</b></div> {/* traduit */}

      <ValidTranslation>
        Hello, world! {/* traduit */}
      </ValidTranslation>

      <InvalidTranslation /> {/* non traduit — le contenu n'est pas littéral ici */}
    </T>
  );
}
```

## Remarques [#notes]

* `<T>` sert à traduire du contenu. Utilisez-le pour du texte brut ou des structures JSX, y compris des variables et la pluralisation.
* Il doit être encapsulé dans un [`<GTProvider>`](/docs/react/reference/components/gt-provider) pour accéder au contexte de traduction.
* Pour traduire des chaînes isolées comme les placeholders et les étiquettes, utilisez [`useGT`](/docs/react/reference/hooks/use-gt).