GitHub

概览

useMessages 函数是一个在构建时用于翻译来自 msg 的 encoded string 的 hook。

const m = useMessages();

<p>{  m(encodedString)  }</p>;

构建时翻译: useMessages 的翻译发生在构建阶段，即应用部署之前。你可以传入由 msg 生成的 encoded string，它们会被翻译成用户的首选语言。

参考资料

参数

无

返回值

一个回调函数 m，用于将 msg 中的编码内容进行翻译。

(encodedContent: string, options?: Record<string, any>) => string

名称	类型	描述
`encodedContent`	`string`	来自 `msg`、待翻译的 encoded string 内容。
`options?`	`Record<string, any>`	可选参数，用于覆盖 encoded string 中的变量。

行为

生产环境

在持续交付/持续部署（CD）流程中，任何位于 msg 函数内的内容都会在应用部署前完成翻译。这可确保所有 locale 都能快速加载，但它只能翻译构建时已知的内容。

生成后，翻译将根据你的配置（1）存储在 CDN（内容分发网络）中，或（2）存储在应用的构建产物中。随后，这些已翻译的内容会提供给你的用户。如果未找到对应翻译，将会回退（fallback）到原始内容。

请务必遵循此处的部署指南。

开发

在开发阶段，m 函数会按需翻译内容。这有助于快速预览你的应用在不同语言下的呈现效果。请务必在环境中添加 Dev API key 以启用此功能。

在开发环境中进行按需翻译时，你可能会看到短暂的延迟。在生产构建中不会出现这种情况，除非内容被明确设置为按需翻译，即使用 tx 或 <Tx>。

示例

基本用法

你可以使用 useMessages 来翻译由 msg 生成的 encoded strings。

import { msg, useMessages } from 'gt-next';

const encodedGreeting = msg('你好，Alice！');

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting)}
    </p>
  );
}

注意：“Alice”将会被翻译为用户的首选语言。

使用变量

你可以在 encoded string 中重写 variables。

import { msg, useMessages } from 'gt-next';

const encodedGreeting = msg('你好，{name}！', { name: 'Alice' });

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}
    </p>
  );
}

注意：这会显示 “Hello, Bob!”——变量会在渲染时被重写。

使用 ICU 消息格式

gt-next 支持 ICU 消息格式，可用于格式化 variables。

import { msg, useMessages } from 'gt-next';

const encodedMessage = msg('购物车中有 {count, plural, =0 {没有商品} =1 {一件商品} other {{count} 件商品}}', { count: 10 });

export default function TranslateGreeting() {
  const m = useMessages();
  return (
    <p>
      {m(encodedMessage)}
    </p>
  );
}

ICU 消息格式是格式化变量的强大工具。了解更多，请参阅 ICU 消息格式文档。

从 `gt-next/client` 导入

如果在使用 "use client" 指令，你应从 gt-next/client 而非 gt-next 导入。

"use client";
import { msg, useMessages } from 'gt-next/client';

const encodedGreeting = msg('你好，Alice！');

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting)}
    </p>
  );
}

说明

useMessages 函数是一个 hook，用于翻译由 msg 生成的 encoded string。
使用 useMessages 的翻译会在运行时之前、于构建过程中完成（开发环境除外）。

下一步

参见 getMessages，在构建阶段从 encoded string 异步获取字符串翻译。
参见 msg 以对字符串进行编码以供翻译。
如需运行时翻译，参见 tx 和 <Tx>。

概览

useMessages 函数是一个在构建时用于翻译来自 msg 的 encoded string 的 hook。

const m = useMessages();

<p>{  m(encodedString)  }</p>;

构建时翻译: useMessages 的翻译发生在构建阶段，即应用部署之前。你可以传入由 msg 生成的 encoded string，它们会被翻译成用户的首选语言。

参考资料

参数

无

返回值

一个回调函数 m，用于将 msg 中的编码内容进行翻译。

(encodedContent: string, options?: Record<string, any>) => string

名称	类型	描述
`encodedContent`	`string`	来自 `msg`、待翻译的 encoded string 内容。
`options?`	`Record<string, any>`	可选参数，用于覆盖 encoded string 中的变量。

行为

生产环境

请务必遵循此处的部署指南。

开发

在开发阶段，m 函数会按需翻译内容。这有助于快速预览你的应用在不同语言下的呈现效果。请务必在环境中添加 Dev API key 以启用此功能。

在开发环境中进行按需翻译时，你可能会看到短暂的延迟。在生产构建中不会出现这种情况，除非内容被明确设置为按需翻译，即使用 tx 或 <Tx>。

示例

基本用法

你可以使用 useMessages 来翻译由 msg 生成的 encoded strings。

import { msg, useMessages } from 'gt-next';

const encodedGreeting = msg('你好，Alice！');

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting)}
    </p>
  );
}

注意：“Alice”将会被翻译为用户的首选语言。

使用变量

你可以在 encoded string 中重写 variables。

import { msg, useMessages } from 'gt-next';

const encodedGreeting = msg('你好，{name}！', { name: 'Alice' });

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}
    </p>
  );
}

注意：这会显示 “Hello, Bob!”——变量会在渲染时被重写。

使用 ICU 消息格式

gt-next 支持 ICU 消息格式，可用于格式化 variables。

import { msg, useMessages } from 'gt-next';

const encodedMessage = msg('购物车中有 {count, plural, =0 {没有商品} =1 {一件商品} other {{count} 件商品}}', { count: 10 });

export default function TranslateGreeting() {
  const m = useMessages();
  return (
    <p>
      {m(encodedMessage)}
    </p>
  );
}

ICU 消息格式是格式化变量的强大工具。了解更多，请参阅 ICU 消息格式文档。

从 `gt-next/client` 导入

如果在使用 "use client" 指令，你应从 gt-next/client 而非 gt-next 导入。

"use client";
import { msg, useMessages } from 'gt-next/client';

const encodedGreeting = msg('你好，Alice！');

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting)}
    </p>
  );
}

说明

useMessages 函数是一个 hook，用于翻译由 msg 生成的 encoded string。
使用 useMessages 的翻译会在运行时之前、于构建过程中完成（开发环境除外）。

下一步

参见 getMessages，在构建阶段从 encoded string 异步获取字符串翻译。
参见 msg 以对字符串进行编码以供翻译。
如需运行时翻译，参见 tx 和 <Tx>。

概览

useMessages 函数是一个在构建时用于翻译来自 msg 的 encoded string 的 hook。

const m = useMessages();

<p>{  m(encodedString)  }</p>;

构建时翻译: useMessages 的翻译发生在构建阶段，即应用部署之前。你可以传入由 msg 生成的 encoded string，它们会被翻译成用户的首选语言。

参考资料

参数

无

返回值

一个回调函数 m，用于将 msg 中的编码内容进行翻译。

(encodedContent: string, options?: Record<string, any>) => string

名称	类型	描述
`encodedContent`	`string`	来自 `msg`、待翻译的 encoded string 内容。
`options?`	`Record<string, any>`	可选参数，用于覆盖 encoded string 中的变量。

行为

生产环境

请务必遵循此处的部署指南。

开发

在开发阶段，m 函数会按需翻译内容。这有助于快速预览你的应用在不同语言下的呈现效果。请务必在环境中添加 Dev API key 以启用此功能。

在开发环境中进行按需翻译时，你可能会看到短暂的延迟。在生产构建中不会出现这种情况，除非内容被明确设置为按需翻译，即使用 tx 或 <Tx>。

示例

基本用法

你可以使用 useMessages 来翻译由 msg 生成的 encoded strings。

import { msg, useMessages } from 'gt-next';

const encodedGreeting = msg('你好，Alice！');

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting)}
    </p>
  );
}

注意：“Alice”将会被翻译为用户的首选语言。

使用变量

你可以在 encoded string 中重写 variables。

import { msg, useMessages } from 'gt-next';

const encodedGreeting = msg('你好，{name}！', { name: 'Alice' });

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}
    </p>
  );
}

注意：这会显示 “Hello, Bob!”——变量会在渲染时被重写。

使用 ICU 消息格式

gt-next 支持 ICU 消息格式，可用于格式化 variables。

import { msg, useMessages } from 'gt-next';

const encodedMessage = msg('购物车中有 {count, plural, =0 {没有商品} =1 {一件商品} other {{count} 件商品}}', { count: 10 });

export default function TranslateGreeting() {
  const m = useMessages();
  return (
    <p>
      {m(encodedMessage)}
    </p>
  );
}

ICU 消息格式是格式化变量的强大工具。了解更多，请参阅 ICU 消息格式文档。

从 `gt-next/client` 导入

如果在使用 "use client" 指令，你应从 gt-next/client 而非 gt-next 导入。

"use client";
import { msg, useMessages } from 'gt-next/client';

const encodedGreeting = msg('你好，Alice！');

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting)}
    </p>
  );
}

说明

useMessages 函数是一个 hook，用于翻译由 msg 生成的 encoded string。
使用 useMessages 的翻译会在运行时之前、于构建过程中完成（开发环境除外）。

下一步

参见 getMessages，在构建阶段从 encoded string 异步获取字符串翻译。
参见 msg 以对字符串进行编码以供翻译。
如需运行时翻译，参见 tx 和 <Tx>。

useMessages

本页内容

useMessages

本页内容

useMessages

本页内容

GitHub在 GitHub 上加星

GitHub在 GitHub 上加星

在 GitHub 上加星

在 GitHub 上加星