# gt-react: General Translation React SDK: derive
URL: https://generaltranslation.com/zh/docs/react/api/strings/derive.mdx
---
title: derive
description: derive() 字符串函数的 API 参考
---

{/* 自动生成：请勿直接编辑。请改为编辑 content/docs-templates/ 中的模板。 */}


## 概述

`derive` 函数允许在字符串的翻译中使用静态函数调用或变量表达式。
这对于编写可复用代码、对句子碎片化进行国际化，以及保持词语之间的一致性都很有用。

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

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

其原理是为每一种可能的结果分别生成不同的翻译，这样可以保留不同语言中的一致性、变位以及语序变化。

<Callout>
  **多个翻译条目：**
  `derive` 会为包装函数的每一种可能结果分别创建单独的翻译条目，这可能会显著增加翻译数量。
  请谨慎使用此功能；当翻译条目增长过快时，优先使用 ICU `select` 语句。
</Callout>

<Callout>
  **静态分析：**
  `derive` 只能分析在构建时已知的内容。
  任何动态内容 (变量、API 调用等) 都必须用 `declareVar` 包装。
</Callout>

## 参考文档

### 参数

| 名称        | 类型                                                           | 说明                |
| --------- | ------------------------------------------------------------ | ----------------- |
| `content` | `T extends string \| boolean \| number \| null \| undefined` | 用于返回可翻译内容的静态函数调用。 |

### 返回值

返回类型为 `T` 的 `content`。

***

## 行为

### 构建时分析

在构建过程中，CLI 工具会：

1. 分析由 `derive` 包装的函数
2. 确定该函数所有可能的返回值 (这些返回值必须在构建时可静态分析)
3. 为每种唯一结果创建单独的翻译条目

### 性能注意事项

与 `<Derive>` 类似，`derive` 也会成倍增加翻译条目。
每个会产生多个结果的函数调用都会生成单独的翻译项，而在同一个字符串中多次调用 `derive` 会使条目总数呈指数级增长。

***

## 示例

### 可复用内容

你可以使用 `derive` 来处理句子碎片化，或配合函数调用实现内容复用。

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

### 句子碎片化

你可以使用 `derive` 处理因函数调用而句子碎片化。

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

### 一致性

如果不使用 `derive`，处理一致性的翻译在语法上会很繁琐。
你必须添加一个 select 语句来处理一致性 (单复数、性别等) 。
此外，你还必须枚举每一种可能的结果。

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

有了 `derive`，处理一致性就变得轻而易举。
无需编写 select 语句，也不必枚举所有可能的结果。

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

通过使用 `derive`，CLI 工具会识别 `getSubject` 有两种可能的结果，并为每种结果分别创建一个翻译条目。
这样就能自动处理一致性问题。

* &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;


### 使用变量

你可以将 `derive` 与 `declareVar` 搭配使用，以支持动态内容。

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


### 复杂函数

函数可以包含多个条件分支和 `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>;
}
```


### 内联表达式与逻辑

你可以在 `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>;
}
```

***


## 注意事项

* 谨慎使用 `derive`，因为它可能会使翻译条目数呈指数级增长
* 所有可能的结果都必须能在构建时静态分析出来
* 静态函数中的变量应使用 `declareVar` 包裹

## 后续步骤

* 如需了解如何在静态函数中标记动态内容，请参阅 [`declareVar`](/docs/react/api/strings/declare-var)
* 如需了解如何从已声明变量中提取原始值，请参阅 [`decodeVars`](/docs/react/api/strings/decode-vars)
* JSX 中的对应写法请参阅 [`<Derive>`](/docs/react/api/components/derive)
* 更多信息请参阅[发布说明](/devlog/gt-next_v6_12_0)