# General Translation React SDKs (gt-react, gt-next): derive
URL: https://generaltranslation.com/es/docs/react/reference/functions/derive.mdx
---

title: derive
description: Marcar variantes finitas de contenido dentro de una traducción de cadenas para extraerlas con General Translation gt-react. Referencia de la API para derive.

---

La función `derive` permite llamadas estáticas a funciones o expresiones de variables dentro de una traducción de cadenas. Es el equivalente para cadenas del componente [`<Derive>`](/docs/react/reference/components/derive), útil para reutilizar código, internacionalizar oraciones fragmentadas y preservar la concordancia gramatical.

*Disponible en `gt-react`, `gt-next`, `gt-tanstack-start` y `gt-react-native`. Los ejemplos importan desde `gt-react`; importe desde el paquete de su framework en su lugar.*

## Resumen general [#overview]

Envuelve una llamada a función o una expresión cuyo resultado pueda variar. La CLI determina todos los posibles resultados y crea una entrada de traducción para cada uno.

```tsx
const getDisplayName = (condition) => (condition ? 'User' : 'Admin');

gt(`${derive(getDisplayName(condition))} says hello.`);
// Crea dos entradas:
// "User says hello."  -> "Usuario dice hola."
// "Admin says hello." -> "Administrador dice hola."
```

*Nota: `derive` crea una entrada de traducción independiente para cada outcome posible, lo que puede aumentar significativamente la cantidad de traducciones. Úsalo con criterio y, cuando el factor de multiplicación sea excesivo, prioriza las sentencias `select` de ICU.*

## Cómo funciona [#how-it-works]

* **Análisis en tiempo de compilación.** La CLI analiza la expresión encapsulada, determina todos los posibles valores de retorno estáticos y crea una entrada de traducción independiente para cada uno. Esto preserva la concordancia gramatical, la conjugación y el orden de las palabras en distintos idiomas.
* **Sin cambios en runtime.** `derive` devuelve su argumento sin modificar en runtime; la derivación solo afecta a la extracción. Ejecuta `gt validate` después de añadir o cambiar llamadas a `derive` para confirmar que la CLI puede resolver cada expresión.
* **Requisito estático.** Solo se puede derivar contenido conocido en tiempo de compilación. Envuelve cualquier contenido dinámico con [`declareVar`](/docs/react/reference/functions/declare-var).
* **Rendimiento.** Al igual que [`<Derive>`](/docs/react/reference/components/derive), varias llamadas a `derive` en una sola cadena multiplican el total de entradas.

## Parámetros [#parameters]

| Parámetro             | Descripción                                               | Tipo                                               | Opcional | Predeterminado |
| --------------------- | --------------------------------------------------------- | -------------------------------------------------- | -------- | -------------- |
| [`content`](#content) | Una expresión estática que devuelve contenido traducible. | `string \| boolean \| number \| null \| undefined` | No       | —              |

### `content` [#content]

**Tipo** `string | boolean | number | null | undefined` · **Obligatorio**

Una llamada estática a una función o una expresión cuyos posibles resultados pueden analizarse en tiempo de compilación.

## Devuelve [#returns]

**Tipo** `T`

Devuelve `content` sin cambios y mantiene su tipo `T`.

## Ejemplos [#examples]

```tsx title="FragmentedSentence.tsx"
import { derive, gt } from 'gt-react';

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

function Component({ gender }) {
  const translation = gt(`The ${derive(getSubject(gender))} is playing.`);
  return <p>{translation}</p>;
}
// "The boy is playing"  -> "El niño está jugando"
// "The girl is playing" -> "La niña está jugando"
```

```tsx title="WithVariables.tsx"
import { derive, declareVar, gt } from 'gt-react';

function getGreeting(name) {
  return name ? `Hello, ${declareVar(name)}` : 'Hello, stranger';
}

function Component({ name }) {
  const translation = gt(`${derive(getGreeting(name))}! How are you?`);
  return <p>{translation}</p>;
}
```

```tsx title="ComplexFunction.tsx"
import { derive, gt } from 'gt-react';

function getStatusMessage(status, priority) {
  if (status === 'complete') {
    return priority === 'high' ? 'Urgent task completed' : 'Task completed';
  } else if (status === 'pending') {
    return priority === 'high' ? 'Urgent task pending' : 'Task pending';
  }
  return 'Task status unknown';
}

function Component({ status, priority }) {
  const message = gt(`${derive(getStatusMessage(status, priority))}.`);
  return <p>{message}</p>;
}
```

```tsx title="InlineExpression.tsx"
import { derive, gt } from 'gt-react';

function Component({ gender }) {
  const message = gt(`The ${derive(gender === 'male' ? 'boy' : 'girl')} is playing.`);
  return <p>{message}</p>;
}
```

## Notas [#notes]

* Usa `derive` con criterio: puede aumentar exponencialmente las entradas de traducción.
* Todos los resultados posibles deben poder analizarse de forma estática en tiempo de compilación.
* Envuelve con [`declareVar`](/docs/react/reference/functions/declare-var) los valores dinámicos de las funciones derivadas.
* Para la forma JSX, consulta el componente [`<Derive>`](/docs/react/reference/components/derive).