# gt-react: General Translation React SDK: Derive
URL: https://generaltranslation.com/es/docs/react/api/components/derive.mdx
---
title: Derive
description: Referencia de la API del componente Derive
---

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


## Descripción general

El componente `<Derive>` 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 independientes: &quot;El niño guapo juega con la pelota&quot; y &quot;La niña guapa juega con la pelota&quot;.

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

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

El componente `<Derive>` le indica a la herramienta CLI que desreferencie una llamada a función y catalogue todo el contenido posible que devuelve esa función, tratando cada instrucción `return` como si estuviera envuelta en un componente `<T>`.

<Callout>
  **Uso avanzado:**
  El componente `<Derive>` es una funcionalidad avanzada y debe usarse con precaución, ya que puede generar una cantidad engañosamente grande de entradas de traducción.
  Además, `<Derive>` impone el requisito estricto de que todas las posibles permutaciones de contenido deben poder analizarse de forma estática.
</Callout>

Para obtener más información, consulta las notas de lanzamiento de [gt-next@6.8.0](/devlog/gt-next_v6_8_0).

***


## Referencia

### Props

<TypeTable
  type={{
  children: {
    type: 'invocación de función',
    optional: false,
  },
}}
/>

### Descripción

| Prop       | Descripción                                                                             |
| ---------- | --------------------------------------------------------------------------------------- |
| `children` | Contenido estático. La herramienta CLI analizará todos los posibles valores de retorno. |

### Devuelve

`React.JSX.Element` que contiene el contenido renderizado de la llamada a la función, donde cada resultado posible crea una entrada de traducción independiente.

***

## Comportamiento

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

Durante el proceso de construcción, la herramienta CLI analiza el contenido de los componentes `<Derive>` y crea entradas de traducción independientes para cada resultado posible.
Esto permite gestionar correctamente la concordancia gramatical y el orden de las palabras en distintos idiomas.

### Requisitos

El contenido de los componentes `<Derive>` debe poder determinarse en tiempo de construcción. La sintaxis admitida incluye:

* Literales de cadena, número y booleano
* Expresiones JSX con componentes `<Derive>` y `<Var>` anidados
* Operadores ternarios
* Invocaciones de funciones (con resultados analizables estáticamente)

***

## Ejemplos

### Uso básico

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

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

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

Esto crea dos entradas de traducción:

* &quot;El niño es bonito&quot;
* &quot;La niña es bonita&quot;


### Con invocaciones de funciones

Usa `<Derive>` para gestionar contenido dinámico generado por una invocación de función que afecta la estructura de la oración.

```jsx title="BasicExample.jsx" copy
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>
  );
}
```


### Con variables

Combina `<Derive>` con `<Var>` para contenido dinámico en los valores devueltos por funciones estáticas.

```jsx title="WithVariables.jsx" copy
import { T, Derive, Var } from 'gt-react';


function getTitle(title) {
  return title === 'Mr.' ? 'Mr.' : 'Ms.';
}

function getGreeting(title) {
  return (
    <>
      Hello, <Derive>{getTitle(title)}</Derive>. How are you, <Var>{name}</Var>?
    </>
  );
}

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


### Varios componentes Derive

Ten cuidado al usar varios componentes `<Derive>`, ya que generan múltiples entradas de traducción.

```jsx title="MultipleDerive.jsx" copy
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>
  );
}
```

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

* &quot;el niño juega con la pelota&quot;
* &quot;el niño juega con el lápiz de cera&quot;
* &quot;la niña juega con la pelota&quot;
* &quot;la niña juega con el lápiz de cera&quot;


### Sintaxis de funciones admitida

```jsx title="SupportedSyntax.jsx" copy
function getExamples(key) {
  switch (key) {
    case 'literals':
      if (condition1) {
        return 'The boy';
      } else if (condition2) {
        return 22;
      } else {
        return true;
      }
    case 'jsx':
      return (
        <>
          Hello, <Derive>{getTitle(title)}</Derive>. How are you,{' '}
          <Var>{name}</Var>?
        </>
      );
    case 'ternary':
      return condition ? 'The boy' : 'The girl';
    case 'function_calls':
      return otherStaticFunction();
  }
}
```

***


## Limitaciones

### Impacto en el rendimiento

Usar `<Derive>` puede provocar un crecimiento exponencial del número de entradas de traducción.
Cada componente `<Derive>` adicional multiplica el número total de traducciones.

### Contenido variable

Cualquier contenido dinámico o variable dentro del valor de retorno de una función estática debe envolverse en componentes `<Var>`.

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

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

***


## Notas

* El componente `<Derive>` está diseñado para gestionar la fragmentación de oraciones sin perder la precisión gramatical en distintos idiomas.
* Considera siempre las implicaciones de rendimiento de usar varios componentes `<Derive>` en una sola traducción.
* Trata cada instrucción `return` en funciones estáticas como si estuviera envuelta en un componente `<T>`.
* Usa `<Derive>` con criterio: prefiere estructuras de traducción más simples siempre que sea posible.

## Siguientes pasos

* Para el contenido variable en las traducciones, consulta el componente [`<Var>`](/docs/react/api/components/var).
* Para el componente principal de traducción, consulta [`<T>`](/docs/react/api/components/t).
* Para el equivalente para cadenas de `<Derive>`, consulta [`derive`](/docs/react/api/strings/derive).