# gt-react: General Translation React SDK: T
URL: https://generaltranslation.com/es/docs/react/api/components/t.mdx
---
title: T
description: Referencia de la API para el componente `<T>`
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. Edita la plantilla en content/docs-templates/. */}


## Resumen

El componente `<T>` es el método principal de traducción en `gt-react`.

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

El componente `<T>` admite traducir texto sin formato, así como estructuras JSX complejas.
Además, proporciona funcionalidades para manejar variables, plurales y traducciones según el contexto.

<Callout>
  **Traducción en tiempo de compilación:**
  Las traducciones de `<T>` se realizan en tiempo de compilación.
  Esto significa que la traducción se realiza antes del despliegue para reducir la latencia.
  Asegúrate de seguir la guía de despliegue aquí(/docs/react/tutorials/quickdeploy).
</Callout>


## Referencia

### Props

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

### Descripciones

| Prop       | Descripción                                                                                                         |
| ---------- | ------------------------------------------------------------------------------------------------------------------- |
| `children` | El contenido que se va a traducir. Puede incluir texto sin formato o estructuras JSX.                               |
| `id`       | Un identificador único para la cadena de traducción. Esto garantiza una traducción coherente en toda tu aplicación. |
| `context`  | Contexto adicional para precisar la traducción. Es útil para resolver frases ambiguas.                              |

### Devuelve

`React.JSX.Element|undefined` que contiene la traducción renderizada o el contenido alternativo, según la configuración proporcionada.

***

## Comportamiento

### Producción

Durante el proceso de CD, cualquier elemento hijo dentro de `<T>` se traducirá antes de desplegar tu aplicación.
Esto garantiza un tiempo de carga rápido para todos los locales, pero solo puede traducir contenido conocido en tiempo de compilación.

Una vez generadas, las traducciones se almacenan (1) en la CDN o (2) en la salida de compilación de tu aplicación, según tu configuración.
A partir de ahí, el contenido traducido se sirve a tus usuarios.
Si no se encuentra una traducción, se usará el contenido original como alternativa.

Asegúrate de seguir la [guía de despliegue aquí](/docs/react/tutorials/quickdeploy).

### Desarrollo

Durante el desarrollo, la función `<T>` traducirá el contenido bajo demanda.
Esto resulta útil para crear prototipos de cómo se verá tu aplicación en diferentes idiomas.
Recuerda añadir una clave API de desarrollo a tu entorno para habilitar este comportamiento.

Mientras se carga, `<T>` devolverá undefined, a menos que los idiomas sean similares (en-US vs en-GB), aunque este comportamiento se puede personalizar con la configuración de renderizado.
Si se produce un error, `<T>` devolverá el contenido original.

En desarrollo, verás una demora durante la traducción bajo demanda.
Esta demora no se producirá en las compilaciones de producción, ya que todo estará traducido de antemano.

***

## Ejemplos

### Uso básico

El componente `<T>` puede traducir cadenas sencillas mediante un `id` y sus elementos hijo.
Recuerda que el componente `<T>` debe usarse dentro de un [`<GTProvider>`](/docs/react/api/components/gtprovider) para acceder a las traducciones.

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

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


### Con variables

El componente `<T>` puede incluir variables para contenido dinámico en las traducciones.

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

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


### Con pluralización

El componente `<T>` también admite la pluralización con el componente `<Plural>`.

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

export default function ItemCount({ count }) {
    return (
        <T id="item_count">
            <Plural n={count}  // [!code highlight] 
                one={<>Tienes un artículo.</>}  // [!code highlight] 
                other={<>Tienes artículos.</>}  // [!code highlight] 
            />  // [!code highlight]
        </T>
    );
}
```


### Limitaciones

El componente `<T>` no traduce contenido dinámico.

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

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} // generará un error // [!code highlight]
        </T>
    );
}
```

La función `<T>` traduce su contenido hijo.

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

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> // se traducirá // [!code highlight]

            <ValidTranslation> // se traducirá // [!code highlight]
                ¡Hola, mundo! // [!code highlight]
            </ValidTranslation> // [!code highlight]

            <InvalidTranslation /> // no se traducirá
        </T>
    );
}
```

<Callout>
  **Nota:** Como regla general, se traducirá cualquier contenido que esté *literalmente* entre los dos `<T>` del archivo.
  Siempre puedes añadir otro `<T>` para traducir el contenido que no se esté traduciendo, aunque no se recomienda anidar componentes `<T>`.
</Callout>

***


## Notas

* El componente `<T>` está diseñado para traducir contenido en tu aplicación. Es el método principal de localización en `gt-react`.
* Usa el componente `<T>` para traducir texto sin formato o estructuras JSX, incluidas las variables y la pluralización.
* Asegúrate de que el componente `<T>` esté envuelto en un [`<GTProvider>`](/docs/react/api/components/gtprovider) para acceder al contexto de traducción.

## Siguientes pasos

* Para funcionalidades más avanzadas, como la traducción bajo demanda, las variables, el contexto y la gestión de plurales, consulta la documentación sobre los [patrones de diseño de `<T>`](/docs/react/guides/t).
* Para traducir cadenas, consulta [`useGT`](/docs/react/api/strings/use-gt).