# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<T>`
URL: https://generaltranslation.com/es/docs/react/reference/components/t.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Traduce el contenido hijo de JSX en el mismo documento. Referencia de la API para el componente `<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`.*

## 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: Las aplicaciones `gt-react` renderizadas en el servidor y TanStack Start proporcionan la configuración regional y las traducciones mediante [`<GTProvider>`](/docs/react/reference/components/gt-provider), mientras que las aplicaciones `gt-next` y `gt-react-native` usan el proveedor de su framework sin esos props. Las SPA de React inicializadas con [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) no necesitan un proveedor.*

## 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 la recarga en caliente en desarrollo configurada, `<T>` solicita las traducciones que faltan mientras creas prototipos. En los componentes renderizados en el cliente, muestra el contenido de origen hasta que haya una traducción disponible y puede conservar la traducción anterior durante una actualización. Las solicitudes de runtime del cliente que se rechazan se registran deduplicando los errores repetidos. Los componentes de servidor, en cambio, esperan a su búsqueda de traducción. Los renderizados de producción usan las traducciones generadas y recurren al contenido de origen cuando falta alguna traducción.
* **Traduce los descendientes, no los hijos 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 solicitada para las traducciones generadas.       | `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**

Solicita a las herramientas de traducción un límite máximo de caracteres como entero positivo. El runtime no trunca el contenido traducido.

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

*Los ejemplos importan desde `gt-react`; en su lugar, importa desde el paquete de tu 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} // ❌ 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.
* Las configuraciones basadas en proveedores renderizan `<T>` dentro de [`<GTProvider>`](/docs/react/reference/components/gt-provider). Las SPA de React y los componentes de servidor síncronos de `gt-next` no requieren uno, pero los componentes cliente de `gt-next` sí.
* Para traducir cadenas independientes, como placeholders y etiquetas, usa [`useGT`](/docs/react/reference/hooks/use-gt).

## Sitemap

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