useDict()

概述

useDict() 用于从翻译字典中获取客户端组件的字符串翻译。它必须在由<GTProvider>包装的组件内使用。

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

对于服务器端翻译，请参阅getDict()。

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

参考

参数

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

描述

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

返回值

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

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

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

示例

基本用法

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

dictionary.jsx

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

当我们想要访问这些条目（在客户端），我们调用 useDict()。这将返回一个函数，该函数接受字典中翻译的键。

TranslateGreeting.jsx

"use client";
import { useDict } from 'gt-next/client';
 
export default async function TranslateGreeting() {
  const d = useDict(); 
  return (
    <p>
      {d('greeting')} // Hello, Alice // [!code highlight]
    </p>
  );
}

使用变量

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

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

dictionary.jsx

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

src/server/TranslateGreeting.jsx

"use client";
import { useDict } from 'gt-next/client';
 
export default async function TranslateGreeting() {
  const d = useDict();
  
  // 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' 添加到 useDict 钩子中，所有的键都被前缀为 prefix1.prefix2：

UserDetails.jsx

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

注意事项

useDict() 函数允许您在客户端访问字典翻译。
useDict() 钩子只能在由<GTProvider> 组件包装的组件中使用。

下一步

有关服务器端翻译，请参阅 getDict()。
了解更多关于在字典参考中使用字典的信息。
有关翻译选项的更多信息，请参阅 DictionaryTranslationOptions。

useDict()

在本页面