Descripción general

El componente <Static> se utiliza para gestionar la fragmentación de oraciones y el contenido reutilizable sin perder la concordancia gramatical, la conjugación ni los cambios en el orden de las palabras. En el siguiente ejemplo, se crean dos traducciones por separado: "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 return como si estuviera envuelta en un componente <T>.

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

Referencia

Props

Descripción

Valor de retorno

React.JSX.Element que contiene el resultado renderizado de la llamada a la función; cada posible resultado genera una Entry de traducción independiente.

Comportamiento

Análisis en tiempo de compilación

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

Requisitos de las funciones

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

• Literales de cadena, numéricos y 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 frase.

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

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

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 dentro de los valores de retorno de funciones estáticas.

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

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>, ya que aumentan el número de entradas de traducción.

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

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):

• "boy plays with the ball"
• "boy plays with the crayon"
• "girl plays with the ball"
• "girl plays with the crayon"

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 del número de entradas de traducción. Cada componente <Static> adicional multiplica el número total de traducciones.

Restricciones de las funciones

• Las funciones deben poder analizarse en tiempo de compilación
• Todas las rutas de retorno deben poder determinarse estáticamente
• El contenido dinámico dentro de los retornos de funciones debe usar componentes <Var>
• Actualmente solo se admiten llamadas a funciones como children directos

Contenido variable

Todo contenido dinámico o variable dentro de los valores de retorno de funciones estáticas debe envolverse 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 gestionar la fragmentación de oraciones manteniendo la precisión gramatical en distintos idiomas.
• Ten siempre en cuenta las implicaciones de rendimiento al usar múltiples componentes <Static> en una sola traducción.
• Trata cada sentencia return en las 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 dentro de las traducciones, consulta el componente <Var>.
• Para el componente principal de traducción, consulta el componente <T>.