# 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. Edita la plantilla en content/docs-templates/. */}


## Descripción general

El componente `<T>` es el método principal de traducción en `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 la traducción de texto sin formato, así como de estructuras JSX complejas.
Además, ofrece funciones para gestionar variables, plurales y traducciones según el contexto.

<Callout>
  **Traducción en tiempo de construcción:**
  Las traducciones de `<T>` se realizan en tiempo de construcción.
  Esto significa que la traducción se hace antes del despliegue para reducir la latencia.
  Asegúrate de seguir [esta guía de despliegue](/docs/react-native/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 debe 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 la aplicación. |
| `context`  | Contexto adicional para afinar la traducción. Ú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 contenido dentro de un `<T>` se traducirá antes de desplegar tu aplicación.
Esto garantiza tiempos de carga rápidos para todas las configuraciones regionales, pero solo puede traducir contenido conocido en tiempo de construcció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.

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 a demanda.
Esto es útil para crear prototipos de cómo se verá tu aplicación en distintos idiomas.
Recuerda agregar una clave de 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 puede personalizarse con los ajustes de renderizado.
Si se produce un error, `<T>` devolverá el contenido original.

Verás un retraso durante la traducción a demanda en desarrollo.
Este retraso no se producirá en las compilaciones de producción, ya que todo ya estará traducido.

***

## Ejemplos

### Uso básico

El componente `<T>` puede traducir cadenas simples usando un `id` y su contenido hijo.
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 admite la pluralización con 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 sus elementos descendientes.

```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:** 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 el contenido de 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 variables y pluralización.
* Asegúrate de que el componente `<T>` esté dentro de un [`<GTProvider>`](/docs/react-native/api/components/gtprovider) para acceder al contexto de traducción.

## Próximos pasos

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