Descripción general

El contenido dinámico es, en general, cualquier contenido que puede cambiar según el usuario, el contexto, el entorno, etc. Esto contrasta con el contenido estático, que permanece igual sin importar el usuario, el contexto, el entorno, etc.

"Tx o no Tx"

A veces queremos traducir contenido dinámico, pero otras veces preferimos que permanezca igual.

Un buen ejemplo sería la dirección de correo electrónico o el nombre de un usuario. Otro ejemplo podría ser el saldo de una cuenta bancaria o el SSN de un usuario. Estos elementos (1) probablemente no necesiten traducción cuando tu app se renderice en otro idioma y (2) pueden variar (en este caso, entre cada usuario).

Ejemplo

import { T, Var } from 'gt-next'

export default function Greeting(name) {
    return (
        <T id='greeting'>
            ¡Hola, <Var>{name}</Var>!
        </T>
    );
}

En lo que respecta a la traducción, esto tiene dos beneficios:

1. No tienes que crear una traducción para cada posible name.
   • Usando <Var>, solo generamos una traducción que, esencialmente, se vería así:
     • ¡Hola, ${name}!
   • Si no usamos <Var>, tendríamos que realizar una traducción a demanda para cada name único:
     • «¡Hola, Alice!», «¡Hola, Bob!», «¡Hola, Charlie!», «¡Hola, David!», ...
2. Tampoco tienes que preocuparte por que los propios nombres cambien a una forma traducida de su name (p. ej., «¡Hola, Alicia!», «¡Hola, Roberto!», ...).

Como puedes ver, el componente <Var> debe usarse para envolver cualquier contenido que deba permanecer igual independientemente del locale. De este modo, evitamos la necesidad de crear traducciones para cada posible value del contenido dinámico.

Al envolver información privada en un componente <Var>, puedes asegurarte de que la información no se envíe a la API de General Translation.