getTranslations()

概览

getTranslations() 用于在服务端组件中从翻译字典获取字符串翻译。

const d = await getTranslations(); // 获取翻译函数
d('greeting.hello'); // 传入 id 获取对应翻译

getTranslations() 支持：

翻译字符串和 JSX 内容。
在翻译中使用变量插值和条件逻辑。
可选的 id 前缀。

关于客户端侧的翻译，请参见 useTranslations()。

getTranslations() 和 useTranslations() 使用字典来存储全部可翻译内容。这与用于翻译的 <T> 组件不同。如果你只打算使用 <T> 组件进行翻译，那么本文档不适用。

参考

Props

Prop	Type	Default
`id??`	`string`	`undefined`

描述

Prop	描述
`id`	一个可选的前缀，用于添加到所有翻译键的前面。这对于处理嵌套字典值很有用。

返回值

一个翻译函数 d() 的 promise，给定一个 id，将返回相应条目的翻译版本

Promise<(id: string, options?: DictionaryTranslationOptions) => React.ReactNode>

名称	类型	描述
`id`	`string`	要翻译的条目的 id
`options?`	`DictionaryTranslationOptions`	用于自定义 `d()` 行为的翻译选项。

示例

字典的基本用法

字典中的每个条目都会被翻译。

dictionary.jsx

const dictionary = {
  greeting: <>Hello, Alice!</>, 
};
export default dictionary;

当我们（在服务端）需要访问这些条目时，调用 getTranslations()。它会返回一个函数，该函数接收字典中翻译项的键。

TranslateGreeting.jsx

import { getTranslations } from 'gt-next/server';

export default async function TranslateGreeting() {
  
  const d = await getTranslations(); 

  return (
    <p>
      {d('greeting')} // Hello, Alice // [!code highlight]
    </p>
  );
}

使用变量

要传递值，需要（1）定义一个标识符，并在调用 d() 函数时（2）引用该标识符。

在这个例子中，我们使用 {} 向翻译传递变量。在字典中，我们定义了标识符 {userName}。

dictionary.jsx

const dictionary = {
  greeting: "Hello, {userName}!", 
};
export default dictionary;

TranslateGreeting.jsx

import { getTranslations } from 'gt-next/server';

export default async function TranslateGreeting() {
  const d = await getTranslations();
  
  // Hello Alice!
  const greetingAlice = d('greeting', { userName: "Alice" }); 

  return (
    <p>
      {greetingAlice}
    </p>
  );
}

使用前缀

我们可以使用前缀仅获取字典的一个子集。

dictionary.jsx

const dictionary = {
  prefix1: { 
    prefix2: { 
      greeting: "Hello, Bob",
    }
  }
};
export default dictionary;

因为我们把 'prefix1.prefix2' 作为参数传给了 getTranslations 方法，所有键都会带上 prefix1.prefix2 前缀：

UserDetails.jsx

import { getTranslations } from 'gt-next/server';

export default function UserDetails() {
  const d = await getTranslations('prefix1.prefix2'); 
  return (
    <div>
      <p>{d('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
    </div>
  );
}

注意事项

getTranslations() 函数允许您在服务器端访问字典翻译。

下一步

查看 useTranslations() 了解 getTranslations() 的客户端等效方法。
在字典参考中了解更多关于使用字典的信息。

getTranslations()

在本页面