# react-native: Derive
URL: https://generaltranslation.com/zh/docs/react-native/api/components/derive.mdx
---
title: Derive
description: Derive 组件 API 参考
---

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


## 概述

`<Derive>` 组件用于处理句子碎片化和可复用内容，同时不影响一致性、词形变化和语序调整。
在下面的示例中，会生成两条不同的译文：&quot;漂亮的男孩在玩球&quot; 和 &quot;漂亮的女孩在玩球&quot;。

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

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

`<Derive>` 组件会指示 CLI 工具解析一个函数调用，并收集该函数所有可能返回的内容，将每个 return 语句都视为由 `<T>` 组件包裹。

<Callout>
  **高级用法：**
  `<Derive>` 组件是一项高级功能，应谨慎使用，因为它可能会生成数量多得惊人的翻译条目。
  此外，`<Derive>` 还严格要求所有可能的内容组合都必须能够进行静态分析。
</Callout>

如需了解更多信息，请参阅 [gt-next@6.8.0](/devlog/gt-next_v6_8_0) 的发布说明。

***


## 参考

### 属性

<TypeTable
  type={{
  children: {
    type: 'function invocation',
    optional: false,
  },
}}
/>

### 说明

| Prop       | 说明                    |
| ---------- | --------------------- |
| `children` | 静态内容。CLI 会分析所有可能的返回值。 |

### 返回值

`React.JSX.Element`，包含该函数调用渲染出的内容；每种可能结果都会生成一个单独的翻译条目。

***

## 运行行为

### 构建时分析

在构建过程中，CLI 工具会分析 `<Derive>` 组件的子元素，并为每种可能的结果创建单独的翻译条目。
这样就能在不同语言中正确处理语法一致性和语序。

### 要求

`<Derive>` 组件的子元素必须能够在构建时确定。支持的语法包括：

* 字符串、数字和布尔字面量
* 包含嵌套 `<Derive>` 和 `<Var>` 组件的 JSX 表达式
* 三元运算符
* 函数调用 (其结果可被静态分析) 

***

## 示例

### 基本用法

使用 `<Derive>` 处理会影响句子结构的动态内容。

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

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

这会创建两个翻译条目：

* &quot;男孩很漂亮&quot;
* &quot;女孩很漂亮&quot;


### 配合函数调用

使用 `<Derive>` 处理由函数调用生成、且会影响句子结构的动态内容。

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

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

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


### 使用变量

将 `<Derive>` 与 `<Var>` 结合使用，在静态函数的返回值中处理动态内容。

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


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


### 多个 Derive 组件

使用多个 `<Derive>` 组件时请务必小心，因为它们会使翻译条目成倍增加。

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

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 种组合) ：

* &quot;男孩拿球玩&quot;
* &quot;男孩拿蜡笔玩&quot;
* &quot;女孩拿球玩&quot;
* &quot;女孩拿蜡笔玩&quot;


### 受支持的函数语法

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

***


## 局限性

### 性能影响

使用 `<Derive>` 可能会导致翻译条目呈指数级增长。
每增加一个 `<Derive>` 组件，译文总数都会成倍增加。

### 变量内容

静态函数返回值中的任何动态或可变内容都必须包裹在 `<Var>` 组件中。

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

// 错误 - 将导致 build 错误
function getContent() {
  return <>Hello, {userName}!</>;
}
```

***


## 注意事项

* `<Derive>` 组件用于处理句子碎片化，同时确保不同语言中的语法准确性。
* 在单个翻译中使用多个 `<Derive>` 组件时，务必考虑其性能影响。
* 对静态函数中的每条 return 语句，都应视为被 `<T>` 组件包裹。
* 谨慎使用 `<Derive>`——在可能的情况下，优先采用更简单的翻译结构。

## 后续步骤

* 关于译文中的变量内容，请参阅 [`<Var>`](/docs/react-native/api/components/var) 组件。
* 关于核心翻译组件，请参阅 [`<T>`](/docs/react-native/api/components/t)。
* 关于 `<Derive>` 对应的字符串版本，请参阅 [`derive`](/docs/react-native/api/strings/derive)。