仪表板

动态内容

在 GT 中使用动态内容的简要概览。

概览

“动态内容”通常指会根据用户、上下文、环境等变化的任何内容。 这与“静态内容”相对，后者无论用户、上下文或环境如何都保持不变。

“要不要用 Tx”

有时我们希望翻译动态内容，但有时又希望它保持不变。

一个典型例子是用户的电子邮箱地址或姓名。 另一个例子可能是银行账户余额或用户的社会安全号码（SSN）。 这类内容通常：(1) 即使应用以其他语言渲染也不需要翻译；且 (2) 会因用户而异。

示例

Greeting.jsx
import { T, Var } from 'gt-next'

export default function Greeting(name) {
    return (
        <T id='greeting'>
            您好，<Var>{name}</Var>！
        </T>
    );
}

就翻译而言，这有两个好处：

  1. 你无需为每个可能的姓名创建一条翻译。
    • 使用 <Var>，我们只需生成一条翻译，基本上看起来像这样：
      • ¡Hola, $&#123;name&#125;!
    • 如果不使用 <Var>，我们就必须为每个唯一的姓名执行按需翻译：
      • "¡Hola, Alice!", "¡Hola, Bob!", "¡Hola, Charlie!", "¡Hola, David!", ...
  2. 你也不必担心姓名本身被改成其对应的译名（例如："¡Hola, Alicia!", "¡Hola, Roberto!", ...）。

如你所见，<Var> 组件应当用于包裹任何在不同 locale 下都应保持不变的内容。 通过这种方式，我们就无需为动态内容的每一种可能取值创建翻译。

将私密信息包裹在 <Var> 组件中，可以确保这些信息不会被发送到 General Translation 的 API。

例外情况

上述说明的例外是：(1) 当在 <Var> 组件内嵌套使用了 <T> 组件时（即嵌套的 <T> 组件的 children 会被翻译）， 或 (2) 当通过 <Var> 组件的子元素以其他方式有意将数据传递给我们的 API（例如 fetch 调用）。 然而，这并不是 <Var> 组件或 General Translation 的 API 的预期用法，这样做会影响加载时间和性能。

这份指南怎么样？

本页内容

概览
“要不要用 Tx”
示例
动态内容