Inline Translations
useMessages
useMessages() 字符串翻译函数的 API 参考
概述
useMessages 是一个在构建时将 msg 产生的 encoded strings 进行翻译的钩子函数。
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 string。
import { msg, useMessages } from 'gt-react';
const encodedGreeting = msg('你好，Alice！');
export default function TranslateGreeting() {
const m = useMessages();
return (
<p>
{m(encodedGreeting)}
</p>
);
}注意：“Alice”将被翻译为用户偏好的语言。
使用变量
你可以在 encoded string 中覆盖变量。
import { msg, useMessages } from 'gt-react';
const encodedGreeting = msg('你好，{name}！', { name: 'Alice' });
export default function TranslateGreeting() {
const m = useMessages();
return (
<p>
{m(encodedGreeting, { name: 'Bob' })}
</p>
);
}注意：这将显示“Hello, Bob!”——变量会在渲染时被重写。
使用 ICU 消息格式
gt-react 支持 ICU 消息格式，可用于对变量进行格式化。
import { msg, useMessages } from 'gt-react';
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 消息格式文档。
备注
useMessages函数是一个 hook，用于将来自msg的 encoded string 解码并翻译。- 使用
useMessages的翻译发生在构建阶段（开发环境除外），而非运行时。
后续步骤
- 参见
getMessages，在构建阶段从 encoded string 异步获取字符串翻译。 - 参见
msg，了解如何对字符串进行编码以用于翻译。 - 需要运行时翻译时，请参见
tx和<Tx>。
这份指南怎么样？