# General Translation React SDKs (gt-react, gt-next, gt-react-native): derive
URL: https://generaltranslation.com/zh/docs/react/reference/functions/derive.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 在字符串翻译中标记有限的内容变体，以便提取。derive 的 API 参考。

`derive` 函数允许在字符串翻译中使用静态函数调用或变量表达式。它相当于 [`<Derive>`](/docs/react/reference/components/derive) 组件的字符串版本，适用于编写可复用代码、将碎片化句子国际化，以及保留词语一致性。

*可用于 `gt-react`、`gt-next`、`gt-tanstack-start` 和 `gt-react-native`。*

## 概览 [#overview]

包装结果会发生变化的函数调用或表达式。CLI 会解析所有可能的 outcome，并为每一种 outcome 创建一个翻译条目。

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

gt(`${derive(getDisplayName(condition))} says hello.`);
// 创建两个条目：
// "User says hello."  -> "Usuario dice hola."
// "Admin says hello." -> "Administrador dice hola."
```

*注意：`derive` 会为每种可能的结果分别创建一个翻译条目，这可能会显著增加翻译数量。请谨慎使用；当倍增系数过大时，优先使用 ICU select 语句。*

## 工作原理 [#how-it-works]

* **构建时分析。** CLI 会分析被包装的表达式，确定所有可能的静态返回值，并为每个值分别创建一个翻译条目。这样可以在不同语言中保留词语一致性、变位和词序。
* **运行时不变。** `derive` 在运行时会原样返回其参数；派生只影响提取。添加或修改 `derive` 调用后，请运行 [`gt validate`](/docs/cli/reference/commands/validate)，以确认 CLI 能解析每个表达式。
* **静态要求。** 只有在构建时已知的内容才能进行派生。请使用 [`declareVar`](/docs/react/reference/functions/declare-var) 包装任何动态内容。
* **性能。** 与 [`<Derive>`](/docs/react/reference/components/derive) 一样，一个字符串中多次调用 `derive` 会使条目总数成倍增加。

## 参数 [#parameters]

| 参数                    | 描述             | Type                                               | 可选 | 默认值 |
| --------------------- | -------------- | -------------------------------------------------- | -- | --- |
| [`content`](#content) | 返回可翻译内容的静态表达式。 | `string \| boolean \| number \| null \| undefined` | 否  | —   |

### `content` [#content]

**类型** `string | boolean | number | null | undefined` · **必填**

其所有可能结果都可在构建时分析的静态函数调用或表达式。

## 返回值 [#returns]

**类型** [`T`](/docs/react/reference/components/t)

原样返回 `content`，同时保留其类型 [`T`](/docs/react/reference/components/t)。

## 示例 [#examples]

*示例从 `gt-react` 导入；请改为从你所用框架的 package 中导入。*

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

## 备注 [#notes]

* 请谨慎使用 `derive`——它可能会使翻译条目数量呈指数级增长。
* 所有可能的结果都必须在构建时可静态分析。
* 在派生函数中，请将动态值包裹在 [`declareVar`](/docs/react/reference/functions/declare-var) 中。
* JSX 形式请参见 [`<Derive>`](/docs/react/reference/components/derive) 组件。

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.