Descripción general

El componente <Static> se utiliza para manejar la fragmentación de oraciones y el contenido reutilizable, sin sacrificar la concordancia, la conjugación ni los cambios en el orden de las palabras. En el siguiente ejemplo, se crean dos traducciones distintas: "The beautiful boy plays with the ball" y "The beautiful girl plays with the ball".

function getSubject(gender) { 
  return gender === "male" ? "boy" : "girl" 
}

<T>
  El hermoso <Static>{getSubject(gender)}</Static> juega con la pelota.
</T>

El componente <Static> le indica a la herramienta CLI que resuelva una llamada de función y catalogue todo el contenido posible que devuelve dicha función, tratando cada instrucción de retorno como si tuviera un componente <T> envolviéndola.

Para obtener más información, consulta las notas de la versión de gt-next@6.8.0.

Referencia

Props

Descripción

Devuelve

React.JSX.Element que contiene el contenido renderizado devuelto por la llamada a la función, donde cada resultado posible genera una Entry de traducción independiente.

Comportamiento

Análisis en tiempo de compilación

Durante el proceso de compilación, la CLI analiza las funciones envueltas en componentes <Static> y crea entradas de traducción independientes para cada posible value de retorno. Esto permite manejar correctamente la concordancia gramatical y el orden de las palabras en diferentes idiomas.

Requisitos de funciones

Las funciones usadas dentro de componentes <Static> deben devolver contenido estático que pueda determinarse en tiempo de compilación. La sintaxis admitida incluye:

• Literales de cadenas, números y valores booleanos
• Expresiones JSX con componentes <Static> y <Var> anidados
• Operadores ternarios
• Sentencias condicionales (if/else)
• Llamadas a otras funciones estáticas

Ejemplos

Uso básico

Usa <Static> para gestionar contenido dinámico que afecta la estructura de la oración.

import { T, Static } from 'gt-react';

function getSubject(gender) { 
  return gender === "male" ? "niño" : "niña" 
}

export default function Example({ gender }) {
  return (
    <T>
      El <Static>{getSubject(gender)}</Static> es hermoso.
    </T>
  );
}

Esto crea dos entradas de traducción:

• "El niño es bonito"
• "La niña es bonita"

Con variables

Combina <Static> con <Var> para contenido dinámico en los valores de retorno de funciones estáticas.

import { T, Static, Var } from 'gt-react';

function getGreeting(title) {
  return (
    <>
      Hola, <Static>{getTitle(title)}</Static>. ¿Cómo estás, <Var>{name}</Var>?
    </>
  );
}

export default function Greeting({ title, name }) {
  return (
    <T>
      <Static>{getGreeting(title)}</Static>
    </T>
  );
}

Varios componentes Static

Ten cuidado al usar varios componentes <Static>, porque multiplican las entradas de traducción.

import { T, Static } from 'gt-react';

function getSubject(gender) { 
  return gender === "male" ? "boy" : "girl" 
}

function getObject(toy) { 
  return toy === "ball" ? "ball" : "crayon"
}

export default function PlayExample({ gender, toy }) {
  return (
    <T>
      <Static>{getSubject(gender)}</Static> juega con el <Static>{getObject(toy)}</Static>.
    </T>
  );
}

Esto crea cuatro entradas de traducción (2 × 2 combinaciones):

• "el niño juega con la pelota"
• "el niño juega con el crayón"
• "la niña juega con la pelota"
• "la niña juega con el crayón"

Sintaxis de funciones compatibles

function getExamples(key) {
  switch (key) {
    case "literals":
      if (condition1) {
        return "El niño"
      } else if (condition2) {
        return 22
      } else {
        return true
      }
    case "jsx":
      return (
        <>
          Hola, <Static>{getTitle(title)}</Static>. ¿Cómo estás, <Var>{name}</Var>?
        </>
      );
    case "ternary":
      return condition ? "El niño" : "La niña"      
    case "function_calls":
      return otherStaticFunction();
  }
}

Limitaciones

Impacto en el rendimiento

Usar <Static> puede provocar un crecimiento exponencial en la cantidad de entradas de traducción. Cada componente <Static> adicional multiplica el número total de traducciones.

Restricciones de funciones

• Las funciones deben ser analizables en tiempo de compilación
• Todas las rutas de retorno deben poder determinarse de forma estática
• El contenido dinámico dentro de los valores de retorno de la función debe usar componentes <Var>
• Actualmente solo se admiten llamadas de función como children directos

Contenido variable

Cualquier contenido dinámico o variable dentro de los valores de retorno de funciones estáticas debe estar envuelto en componentes <Var>.

// Correcto
function getContent() {
  return <>Hello, <Var>{userName}</Var>!</>;
}

// Incorrecto: causará errores de compilación
function getContent() {
  return <>Hello, {userName}!</>;
}

Notas

• El componente <Static> está diseñado para manejar la fragmentación de frases manteniendo la corrección gramatical en distintos idiomas.
• Ten siempre en cuenta las implicaciones de rendimiento de usar múltiples componentes <Static> en una sola traducción.
• Trata cada instrucción return en funciones estáticas como si estuviera envuelta con un componente <T>.
• Usa <Static> con criterio: cuando sea posible, prefiere estructuras de traducción más simples.

Próximos pasos

• Para contenido variable en las traducciones, consulta el componente <Var>.
• Para el componente principal de traducción, consulta <T>.