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

title: T
description: Traduce el contenido hijo de JSX en el mismo documento con General Translation gt-react. Referencia de la API para T.

---

El componente `<T>` es el método principal de traducción en `gt-react`. Traduce su contenido hijo de JSX —texto sin formato y marcado anidado— a la configuración regional activa, en el mismo documento.

*Disponible en `gt-react`, `gt-next`, `gt-tanstack-start` y `gt-react-native`. Los ejemplos importan desde `gt-react`; importa desde el paquete de tu framework en lugar de ese.*

## Resumen general [#overview]

Envuelve cualquier JSX estático en `<T>` para que se traduzca a la configuración regional activa. Usa componentes variables como [`<Var>`](/docs/react/reference/components/var) y [`<Num>`](/docs/react/reference/components/num) para valores dinámicos.

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

*Nota: `<T>` debe renderizarse dentro de un [`<GTProvider>`](/docs/react/reference/components/gt-provider) para poder acceder a las traducciones. Para cadenas independientes, usa [`useGT`](/docs/react/reference/hooks/use-gt) en su lugar.*

## Cómo funciona [#how-it-works]

* **Traducción en tiempo de compilación.** En producción, el contenido dentro de un `<T>` se traduce durante la compilación (o el despliegue), antes de que los usuarios carguen la app. Esto mantiene un runtime rápido, pero solo puede traducirse el contenido conocido en tiempo de compilación. Las traducciones generadas se sirven desde la CDN o desde la salida de compilación de tu app, y recurren al contenido original cuando falta alguna traducción.
* **Bajo demanda en desarrollo.** Con una clave de API de desarrollo configurada, `<T>` traduce bajo demanda para que puedas previsualizar configuraciones regionales mientras creas prototipos. Mientras se carga una traducción, `<T>` devuelve `undefined` (a menos que el origen y el destino compartan un idioma, como `en-US` y `en-GB`); si se produce un error, devuelve el contenido original. Esta demora no se produce en las compilaciones de producción.
* **Traduce los descendientes, no los children dinámicos.** `<T>` traduce literalmente el JSX escrito entre sus etiquetas. El contenido que se pasa mediante una variable (por ejemplo, `{greeting}`) no se puede traducir y provoca un error; envuelve los valores dinámicos en un componente variable. Una buena regla general: se traduce todo lo que esté literalmente entre las dos etiquetas `<T>`. Evita anidar componentes `<T>`.

## Props [#props]

| Prop                                  | Descripción                                                       | Type        | Opcional | Predeterminado |
| ------------------------------------- | ----------------------------------------------------------------- | ----------- | -------- | -------------- |
| [`children`](#children)               | El contenido JSX que se va a traducir.                            | `ReactNode` | No       | —              |
| [`$context`](#context)                | Contexto de desambiguación para los traductores.                  | `string`    | Sí       | —              |
| [`$id`](#id)                          | Identificador estable de la entrada.                              | `string`    | Sí       | —              |
| [`$maxChars`](#max-chars)             | Longitud máxima de la traducción.                                 | `number`    | Sí       | —              |
| [`$requiresReview`](#requires-review) | Marca la traducción para que requiera aprobación antes de usarse. | `boolean`   | Sí       | —              |

### `children` [#children]

**Tipo** `ReactNode` · **Obligatorio**

El contenido que se traducirá. Puede ser texto sin formato o una estructura JSX, incluidos componentes variables y de bifurcación. El contenido debe ser estático; los valores dinámicos deben envolverse en un componente variable.

### `$context` [#context]

**Tipo** `string` · **Opcional**

Contexto adicional para afinar la traducción. Útil para resolver frases ambiguas y ayudar a los traductores a transmitir el significado deseado.

### `$id` [#id]

**Tipo** `string` · **Opcional**

Un identificador estable para la entrada de traducción, que mantiene la coherencia de las traducciones y facilita encontrar la entrada en el Editor de traducción.

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

**Tipo** `number` · **Opcional**

La cantidad máxima de caracteres de la traducción. La biblioteca aplica este límite y trunca las salidas más largas.

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

**Tipo** `boolean` · **Opcional**

Marca el contenido traducido para que requiera aprobación antes de usarse, de modo que quede en revisión en lugar de servirse automáticamente.

## Ejemplos [#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} // ❌ los hijos dinámicos no se pueden traducir — envuélvelos en <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> {/* traducido */}

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

      <InvalidTranslation /> {/* no traducido — el contenido no es literal aquí */}
    </T>
  );
}
```

## Notas [#notes]

* `<T>` sirve para traducir contenido. Úsalo con texto sin formato o estructuras JSX, incluidas variables y pluralización.
* Debe estar envuelto en un [`<GTProvider>`](/docs/react/reference/components/gt-provider) para acceder al contexto de traducción.
* Para traducir cadenas independientes, como placeholders y etiquetas, usa [`useGT`](/docs/react/reference/hooks/use-gt).