Components

<Var>

Referencia de la API para el componente <Var>

Descripción general

El componente <Var> se utiliza para mostrar contenido que no debe ser traducido. Esto es útil para mostrar variables, fragmentos de código u otro contenido que no debe ser traducido. Además, esto es útil para mostrar contenido que debe mantenerse privado, como claves de API o información personal.

<Var>{user.name}</Var>

El componente <Var> siempre se utiliza dentro de un componente <T>. Piénsalo como un recurso general para valores dinámicos que no encajan en la categoría de <Currency>, <DateTime> o <Num>.

Referencia

Props

PropTypeDefault
value??
string
undefined
name??
string
undefined
children??
JSX.Element
undefined

Descripción

PropDescripción
childrenEl contenido que se renderiza dentro del componente. Si se proporciona, tendrá prioridad sobre value.
valueValor predeterminado opcional que se mostrará si no se proporciona children. Puede ser una cadena.

Retorna

JSX.Element que contiene el contenido que no debe ser traducido.


Ejemplos

Ejemplo básico

El componente <Var> debe usarse dentro de un componente <T>.

Example.jsx
import { T, Var } from 'gt-next'

export default function Example(user) {
  return (
    <T>
      Translate this text!
      Your name is: <Var>{user.name}</Var> // [!code highlight]
      <Var><p>Do not translate this text</p></Var> // [!code highlight]
    </T>
  );
}

Notas

  • Los Componentes de Variable son esenciales para mantener contenido dinámico e intraducible en las traducciones.
  • Siempre utiliza los Componentes de Variable dentro de un componente <T>.
  • Componentes como <Num>, <Currency> y <DateTime> ofrecen funciones de localización para asegurar un formato preciso.

Próximos pasos

  • Para una discusión más detallada y ejemplos de uso del componente <Var> y otros componentes de variables como <Currency>, <DateTime> y <Num>, consulta la documentación de Uso de componentes de variables.
  • Obtén más información sobre las opciones de formato para componentes de variables específicos en la Referencia de la API.

¿Qué te parece esta guía?