# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<T>`
URL: https://generaltranslation.com/fr/docs/react/reference/components/t.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Traduisez les éléments enfants JSX sur place. Référence de l’API pour le composant `<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`.*

## Vue d’ensemble [#overview]

Encapsulez 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 : Les applications `gt-react` et TanStack Start rendues côté serveur fournissent le paramètre régional et les traductions via [`<GTProvider>`](/docs/react/reference/components/gt-provider), tandis que les applications `gt-next` et `gt-react-native` utilisent le provider de leur framework sans ces props. Les SPA React initialisées avec [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) n’ont pas besoin d’un provider.*

## 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.** Lorsque le hot reload de développement est configuré, `<T>` demande les traductions manquantes pendant que vous prototypez. Dans les composants affichés côté client, il affiche le contenu source jusqu’à ce qu’une traduction soit disponible et peut conserver la traduction précédente pendant une mise à jour. Les requêtes rejetées à l’exécution côté client sont journalisées, les erreurs répétées étant dédupliquées. Les Server Components, eux, attendent le résultat de leur recherche de traduction. Les rendus de production utilisent les traductions générées et reviennent au contenu source lorsqu’une traduction est absente.
* **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 demandée pour les traductions générées.        | `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**

Demande aux outils de traduction de respecter un nombre maximal de caractères sous la forme d’un entier positif. Le runtime ne tronque pas le contenu traduit.

### `$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]

*Les exemples utilisent `gt-react` ; importez plutôt depuis le paquet de votre framework.*

```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.
* Les configurations basées sur un provider affichent `<T>` sous [`<GTProvider>`](/docs/react/reference/components/gt-provider). Les SPA React et les composants serveur synchrones de `gt-next` n’en nécessitent pas, mais les composants client de `gt-next` en nécessitent un.
* Pour traduire des chaînes isolées comme les placeholders et les étiquettes, utilisez [`useGT`](/docs/react/reference/hooks/use-gt).

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.