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

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

---

El componente `<Derive>` gestiona la fragmentación de frases y el contenido reutilizable sin sacrificar la concordancia, la conjugación ni el orden de las palabras. Le indica al CLI que catalogue todos los valores posibles de sus children y cree una entrada de traducción independiente para cada uno.

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

## Descripción general [#overview]

Envuelve un valor o una llamada a función cuyo resultado varía. La CLI trata cada posible resultado como si estuviera envuelto en su propio [`<T>`](/docs/react/reference/components/t).

```tsx
<T>
  The beautiful <Derive>{getSubject(gender)}</Derive> plays with the ball.
</T>
```

Esto produce dos entradas: &quot;El niño guapo juega con la pelota&quot; y &quot;La niña guapa juega con la pelota&quot;.

*Nota: `<Derive>` es una característica avanzada. Puede generar un número engañosamente grande de entradas de traducción, y cada posible permutación del contenido debe poder analizarse estáticamente. Para la forma de cadena, consulta [`derive`](/docs/react/reference/functions/derive).*

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

* **Análisis en tiempo de compilación.** Durante la compilación, la CLI analiza los children de cada `<Derive>` y crea una entrada de traducción independiente para cada resultado posible, de modo que la concordancia gramatical y el orden de las palabras se resuelvan correctamente en cada idioma.
* **Se renderiza sin cambios en tiempo de ejecución.** En tiempo de ejecución, `<Derive>` renderiza sus children resueltos tal cual; la derivación solo afecta a la extracción.
* **Requisito estático.** Los children deben poder determinarse en tiempo de compilación. La sintaxis compatible incluye literales de string, number y boolean; expresiones JSX con `<Derive>` anidados y [`<Var>`](/docs/react/reference/components/var); operadores ternarios; y llamadas a función con resultados analizables de forma estática. Los valores dinámicos deben envolverse en `<Var>`.

## Props [#props]

| Prop                    | Descripción                                               | Type        | Opcional | Predeterminado |
| ----------------------- | --------------------------------------------------------- | ----------- | -------- | -------------- |
| [`children`](#children) | Contenido estático cuyos valores posibles analiza la CLI. | `ReactNode` | No       | —              |

### `children` [#children]

**Tipo** `ReactNode` · **Obligatorio**

Contenido estático: un literal, un ternario o una llamada a función con resultados analizables de forma estática. La CLI genera una entrada de traducción por cada valor posible.

## Ejemplos [#examples]

```tsx title="BasicExample.tsx"
import { T, Derive } from 'gt-react';

export default function Example({ gender }) {
  return (
    <T>
      The <Derive>{gender === 'male' ? 'boy' : 'girl'}</Derive> is beautiful.
    </T>
  );
}
// Crea: "The boy is beautiful" y "The girl is beautiful"
```

```tsx title="FunctionInvocation.tsx"
import { T, Derive } from 'gt-react';

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

export default function Example({ gender }) {
  return (
    <T>
      The <Derive>{getSubject(gender)}</Derive> is beautiful.
    </T>
  );
}
```

```tsx title="MultipleDerive.tsx"
import { T, Derive } 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>
      <Derive>{getSubject(gender)}</Derive> plays with the{' '}
      <Derive>{getObject(toy)}</Derive>.
    </T>
  );
}
// Crea cuatro entradas (2 × 2): boy/girl × ball/crayon
```

## Limitaciones [#limitations]

* **Crecimiento exponencial.** Cada `<Derive>` adicional multiplica el número total de entradas de traducción. Úsalo con criterio y, cuando sea posible, prefiere estructuras más simples.
* **El contenido variable debe ir envuelto.** Cualquier contenido dinámico o variable dentro de los valores devueltos por funciones estáticas debe envolverse en [`<Var>`](/docs/react/reference/components/var), o la compilación fallará.

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

// ❌ Incorrecto — causa errores de compilación
function getContent() {
  return <>Hello, {userName}!</>;
}
```