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

title: Derive
description: 在使用 General Translation gt-react 进行翻译时，标记其中有限的内容变体以供提取。Derive 的 API 参考。

---

`<Derive>` 组件可在不牺牲词形一致、动词变位或词序的情况下，处理句子拆分和可复用内容。它会通知 CLI 对其子元素的所有可能取值进行编目，并为每个值创建单独的翻译条目。

*可用于 `gt-react`、`gt-next`、`gt-tanstack-start` 和 `gt-react-native`。示例从 `gt-react` 导入；请改为从你所用框架对应的包中导入。*

## 概览 [#overview]

用于包装结果可能变化的值或函数调用。CLI 会将每一种可能的 outcome 视为分别包装在各自的 [`<T>`](/docs/react/reference/components/t) 中。

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

这会生成两个条目：&quot;这个漂亮的男孩在玩球&quot; 和 &quot;这个漂亮的女孩在玩球&quot;。

*注意：`<Derive>` 是一项高级功能。它可能会生成数量多得惊人的翻译条目，而且每一种可能的内容组合都必须能被静态分析。关于字符串形式，请参见 [`derive`](/docs/react/reference/functions/derive)。*

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

* **构建时分析。** 在构建过程中，CLI 会分析每个 `<Derive>` 的子元素，并为每一种可能的结果分别创建翻译条目，从而确保各语言中的语法一致性和语序都能得到正确处理。
* **运行时保持原样渲染。** 在 Runtime 中，`<Derive>` 会将其已解析的子元素按原样渲染出来；派生仅影响提取过程。
* **静态要求。** 子元素必须能在构建时确定。支持的语法包括字符串、数字和布尔字面量；包含嵌套 `<Derive>` 和 [`<Var>`](/docs/react/reference/components/var) 的 JSX 表达式；三元运算符；以及结果可被静态分析的函数调用。动态值必须包裹在 `<Var>` 中。

## 属性 [#props]

| 属性                      | 说明                    | 类型          | 可选 | 默认值 |
| ----------------------- | --------------------- | ----------- | -- | --- |
| [`children`](#children) | CLI 会分析其可能的取值范围的静态内容。 | `ReactNode` | 否  | —   |

### `children` [#children]

**类型** `ReactNode` · **必填**

静态内容——字面量、三元表达式，或结果可静态分析的函数调用。CLI 会为每个可能的值生成一个翻译条目。

## 示例 [#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>
  );
}
// 生成："The boy is beautiful" 和 "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>
  );
}
// 创建四个条目（2 × 2）：boy/girl × ball/crayon
```

## 限制 [#limitations]

* **指数级增长。** 每增加一个 `<Derive>`，翻译条目的总数都会成倍增长。请谨慎使用，并尽量优先采用更简单的结构。
* **变量内容必须包裹起来。** 静态函数返回值中的任何动态或变量内容都必须包裹在 [`<Var>`](/docs/react/reference/components/var) 中，否则构建会报错。

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

// ❌ 错误 — 会导致构建错误
function getContent() {
  return <>Hello, {userName}!</>;
}
```