Dictionary

getDict()

getDict 服务器端翻译函数的 API 参考

概述

getDict() 用于从翻译字典获取服务器端组件的字符串翻译。

const d = await getDict(); // 获取翻译函数
d('greeting.hello'); // 传递 id 以获取翻译

getDict() 支持:

  • 字符串和 jsx 内容的翻译。
  • 翻译中的变量插入和条件逻辑。
  • 可选的 id 前缀。

对于客户端翻译,请参阅 useDict()

getDict()useDict() 使用字典来存储所有翻译内容。 这与使用 <T> 组件进行翻译不同。 如果您只对使用 <T> 组件进行翻译感兴趣,那么本文档不相关。

参考

属性

PropTypeDefault
id??
string
undefined

描述

属性描述
id一个可选的前缀,用于添加到所有翻译键之前。这对于处理嵌套字典值非常有用。

返回值

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

Promise<(id: string, options?: DictionaryTranslationOptions) => React.ReactNode>
名称类型描述
idstring要翻译的条目的 id
options?DictionaryTranslationOptions自定义 d() 行为的翻译选项。

示例

基本用法

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

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

当我们想要访问这些条目(在服务器端)时,我们调用 getDict()。 这将返回一个函数,该函数接受字典中翻译的键。

TranslateGreeting.jsx
import { getDict } from 'gt-next/server';
 
export default async function TranslateGreeting() {
  
  const d = await getDict(); 
 
  return (
    <p>
      {d('greeting')} // Hello, Alice // [!code highlight]
    </p>
  );
}

使用变量

为了传递值,你必须 (1) 分配一个标识符,并且 (2) 在调用 d() 函数时引用该标识符。

在这个例子中,我们使用 {} 将变量传递给翻译。 在字典中,我们分配标识符 {userName}

dictionary.jsx
const dictionary = {
  greeting: "Hello, {userName}!", 
};
export default dictionary;
TranslateGreeting.jsx
import { getDict } from 'gt-next/server';
 
export default async function TranslateGreeting() {
  const d = await getDict();
  
  // 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' 添加到 getDict 方法中,所有的键都被前缀为 prefix1.prefix2

UserDetails.jsx
import { getDict } from 'gt-next/server';
 
export default function UserDetails() {
  const d = await getDict('prefix1.prefix2'); 
  return (
    <div>
      <p>{d('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
    </div>
  );
}

注意事项

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

下一步

  • 查看 useDict() 以获取 getDict() 的客户端等效版本。
  • 字典参考 中了解更多关于使用字典的信息。

在本页面