# General Translation Key Concepts: 动态内容
URL: https://generaltranslation.com/zh/docs/key-concepts/dynamic-content.mdx
---
title: 动态内容
description: 简要介绍如何在 GT 中使用动态内容。
---
## 概述
**动态内容** 通常是指任何会根据用户、上下文、环境等发生变化的内容。
与之相对的是 **静态内容**，后者无论用户、上下文、环境等如何变化，始终保持不变。
TL;DR
* 静态内容永远不会变化 (原始字符串、文本等) 。
* 动态内容会发生变化 (姓名、电子邮件、时间、语言等) 。
**什么是静态内容？**
静态内容通常是指存在于交付给用户的 bundle 中的任何原始文本。
一个很实用的经验法则是：凡是开发者能直接从源代码里读到的文本或字符串，都属于静态文本。
例如，来看这个文件：
```jsx title="Landing.jsx" copy
export default function Landing() {
return (
<> Welcome to my app!
);
}
```
文本 “Welcome to my app!” 就是静态内容，因为它永远不会变化。
但是，如果我们想让页面在用户登录时作出不同响应呢：
```jsx title="Landing.jsx" copy
export default function Landing(user) {
if (user) {
return (
Welcome to my app, {user.name}!
);
}
return (
Welcome to my app!
);
}
```
虽然这两句话是根据条件渲染的，但它们仍然都属于静态文本。
记住我们的经验法则：通过阅读 `landing.jsx` 的源代码，我们可以看到这些内容。
不过，`{user.name}` 属于动态内容，因为它会变化。
仅通过阅读 `landing.jsx` 文件，我们无法知道最终会在用户屏幕上渲染出什么。
## “要不要 Tx”
有时，我们希望翻译动态内容；但有时，我们又希望它保持原样。
一个很好的例子是用户的电子邮箱地址或姓名。
另一个例子可能是银行账户余额或用户的社会安全号码 (SSN) 。
这类内容 (1) 在你的应用以不同语言呈现时通常不需要翻译，并且 (2) 会因用户不同而有所变化。
### 示例
```jsx title="Greeting.jsx" copy
import { T, Var } from 'gt-next'
export default function Greeting(name) {
return (
Hello, {name}!
);
}
```
就翻译而言，这有两个好处：
1. 你不需要为每一个可能的名字都创建翻译。
* 使用 `` 时，我们只需生成一条翻译，大致如下：
* `¡Hola, ${name}!`
* 如果不使用 ``，就必须为每个不同的名字执行按需翻译：
* "¡Hola, Alice!"、"¡Hola, Bob!"、"¡Hola, Charlie!"、"¡Hola, David!"，……
2. 你也不用担心名字本身会被翻译成对应的译名： (例如 "¡Hola, Alicia!"、"¡Hola, Roberto!"，……) 。
**注意：** ``、``、`` 和 `` 组件可用于 `gt-next`、`gt-react` 和 `gt-react-native`。
如你所见，`` 组件应用于包裹任何无论区域设置如何都应保持不变的内容。
这样一来，我们就不必为动态内容的每一种可能取值都创建翻译。
通过将私密信息包裹在 `` 组件中，你可以确保这些信息不会被发送到 General Translation API。
**例外情况**
上述说法有两种例外情况：(1) 在 `` 组件内部使用嵌套的 `` 组件时 (也就是说，嵌套 `` 组件的子内容仍会被翻译)
或 (2) 当数据通过 `` 组件子元素中的其他方式被有意传递给我们的 API 时 (例如 `fetch` 调用) 。
不过，这既不是 `` 组件的预期用法，也不是 General Translation API 的预期用法，这样做可能会拖慢加载时间并影响性能。