# react-native: T
URL: https://generaltranslation.com/es/docs/react-native/api/components/t.mdx
---
title: T
description: Referencia de la API del componente `<T>`
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. En su lugar, edita la plantilla en content/docs-templates/. */}


## Resumen

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

```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 tanto texto sin formato como estructuras JSX complejas.
Además, ofrece funciones para gestionar variables, plurales y traducciones según el contexto.

<Callout>
  **Traducción en tiempo de compilación:**
  Las traducciones de `<T>` se generan 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-native/tutorials/quickdeploy).
</Callout>


## Referencia

### Propiedades

<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 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. Útil para resolver expresiones 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 un `<T>` se traducirá antes de desplegar tu aplicación.
Esto garantiza tiempos de carga rápidos 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-native/tutorials/quickdeploy).

### Desarrollo

Durante el desarrollo, la función `<T>` traducirá el contenido bajo demanda.
Esto resulta útil para prototipar 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, salvo 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.

Verás un retraso durante la traducción bajo demanda en desarrollo.
Este retraso 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 `children`.
Recuerda que el componente `<T>` debe usarse dentro de un [`<GTProvider>`](/docs/react-native/api/components/gtprovider) para acceder a las traducciones.

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

export default function Greeting() {
    return (
        <T id="greeting"> // [!code highlight]
            Hello, world!
        </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-native';

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


### Con plurales

El componente `<T>` también permite la pluralización mediante el componente `<Plural>`.

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

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-native';

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-native';

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]
                Hello, world! // [!code highlight]
            </ValidTranslation> // [!code highlight]

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

<Callout>
  **Nota:** Una buena regla general es que 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-native`.
* 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-native/api/components/gtprovider) para acceder al contexto de traducción.

## Próximos pasos

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