# gt-react: General Translation React SDK: derive
URL: https://generaltranslation.com/es/docs/react/api/strings/derive.mdx
---
title: derive
description: Referencia de la API de la función de cadena derive()
---

{/* GENERADO AUTOMÁTICAMENTE: No lo edites directamente. En su lugar, edita la plantilla en content/docs-templates/. */}


## Resumen

La función `derive` permite usar llamadas a funciones estáticas o expresiones de variables dentro de la traducción de una cadena.
Esto es útil para escribir código reutilizable, internacionalizar frases fragmentadas y preservar la concordancia entre palabras.

```jsx
const getDisplayName = (condition) => {
  return condition ? "Brian" : 'Archie';
};

gt(`${derive(getDisplayName(condition))} says hello.`);
// Crea dos entradas de traducción:
// "Brian says hello." -> "Brian dice hola."
// "Archie says hello." -> "Archie dice hola."
```

Esto funciona generando traducciones distintas para cada resultado posible, con la ventaja de preservar la concordancia, la conjugación y los cambios en el orden de las palabras en distintos idiomas.

<Callout>
  **Múltiples entradas de traducción:**
  `derive` crea entradas de traducción separadas para cada resultado posible de la función envuelta, lo que puede aumentar significativamente la cantidad de traducciones.
  Usa esta funcionalidad con criterio y prioriza las sentencias `select` de ICU cuando el factor de multiplicación sea excesivo.
</Callout>

<Callout>
  **Análisis estático:**
  `derive` solo puede analizar contenido que se conoce en tiempo de compilación.
  Cualquier contenido dinámico (variables, llamadas a la API, etc.) debe envolverse con `declareVar`.
</Callout>

## Referencia

### Parámetros

| Nombre    | Tipo                                                         | Descripción                                                        |
| --------- | ------------------------------------------------------------ | ------------------------------------------------------------------ |
| `content` | `T extends string \| boolean \| number \| null \| undefined` | Una llamada de función estática que devuelve contenido traducible. |

### Devuelve

Devuelve `content` de tipo `T`.

***

## Comportamiento

### Análisis en tiempo de compilación

Durante el proceso de compilación, la herramienta CLI:

1. Analiza la función envuelta por `derive`
2. Determina todos los posibles valores de retorno de la función (deben poder analizarse estáticamente en tiempo de compilación)
3. Crea entradas de traducción separadas para cada resultado único

### Consideraciones de rendimiento

Al igual que `<Derive>`, `derive` multiplica las entradas de traducción.
Cada llamada a una función con múltiples resultados posibles crea traducciones separadas, y varias llamadas a `derive` en la misma cadena multiplican exponencialmente el número total de entradas.

***

## Ejemplo

### Contenido reutilizable

Puedes usar `derive` para manejar frases fragmentadas o para reutilizar contenido en llamadas a funciones.

```jsx copy
import { derive, gt } from 'gt-react';

function getSubject() {
  return "boy";
}

function Component() {
  const translation1 = gt(`The ${derive(getSubject())} is playing.`);
  const translation2 = gt(`The ${derive(getSubject())} is having fun.`);
  const translation3 = gt(`The ${derive(getSubject())} is having a great time.`);
  return <p>{translation1} {translation2} {translation3}</p>;
}
```


### Frases fragmentadas

Puedes usar `derive` para manejar frases fragmentadas mediante llamadas a funciones.

```jsx copy
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>;
}
```


### Concordancia

Sin `derive`, traducir la concordancia resulta sintácticamente engorroso.
Tienes que añadir una sentencia `select` para manejar la concordancia (pluralidad, género, etc.).
Luego, también debes enumerar cada resultado posible.

```jsx copy
import { gt } from 'gt-react';

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

function Component({ gender }) {
  const translation = gt(
    '{gender, select, boy {The boy is playing.} girl {The girl is playing.} other {}}',
    {
      gender: getSubject(gender) ,
    },
  );
  return <p>{translation}</p>;
}
```

Con `derive`, la concordancia resulta trivial.
No necesitas ninguna sentencia `select` ni especificar cada posible resultado.

```jsx copy
import { derive, declareVar, 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>;
}
```

Al usar `derive`, la herramienta CLI identifica que `getSubject` tiene dos posibles resultados y crea una entrada de traducción para cada uno.
De este modo, la concordancia se resuelve automáticamente.

* &quot;The boy is playing&quot; -&gt; &quot;*El* niño está jugando&quot;
* &quot;The girl is playing&quot; -&gt; &quot;*La* niña está jugando&quot;


### Con variables

Puedes combinar `derive` con `declareVar` para contenido dinámico.

```jsx copy
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>;
}
```


### Funciones complejas

Las funciones pueden contener varias ramas condicionales y sentencias `return`.

```jsx copy
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>;
}
```


### Expresiones y lógica en línea

Puedes incorporar lógica directamente en la llamada a `derive`.

```jsx copy
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

* Usa `derive` con criterio, ya que puede aumentar exponencialmente las entradas de traducción
* Todos los resultados posibles deben ser analizables estáticamente en tiempo de compilación
* Las variables dentro de funciones estáticas deben envolverse con `declareVar`

## Próximos pasos

* Consulta [`declareVar`](/docs/react/api/strings/declare-var) para marcar contenido dinámico dentro de funciones estáticas
* Consulta [`decodeVars`](/docs/react/api/strings/decode-vars) para extraer los valores originales de las variables declaradas
* Consulta [`<Derive>`](/docs/react/api/components/derive) para ver el equivalente en JSX
* Lee las [notas de la versión](/devlog/gt-next_v6_12_0) para obtener más información