在使用 Lingui.js 进行 React 应用国际化时，t 宏有时无法直接在非订阅组件中进行翻译，而 组件则工作正常。核心原因在于 t 宏需要组件能够访问 Lingui 的 i18n 上下文。本文将详细介绍如何通过 useLingui 钩子或 msg（defineMessage）宏结合 i18n._ 方法来正确处理动态或非直接渲染的翻译内容，确保所有文本都能被正确国际化。
理解 Lingui.js 的翻译机制
lingui.js 提供了多种方式来实现国际化：
组件：这是最直接且推荐的方式，用于包裹需要翻译的静态文本内容。它会自动订阅 i18n 上下文，并在语言切换时重新渲染。t 宏：用于在 JavaScript/TypeScript 代码中进行翻译，通常用于动态生成的文本或属性值。然而，t 宏的翻译能力依赖于其所在的组件是否能够访问到 Lingui 的 i18n 上下文。msg (或 defineMessage) 宏：此宏不直接进行翻译，而是返回一个 MessageDescriptor 对象。这个描述符包含了原始消息 ID 和可选的上下文信息，可以被传递到其他地方，然后通过 i18n._() 方法进行翻译。
当 t 宏在 React 组件中不生效时，通常是因为该组件没有“订阅”到 Lingui 的 i18n 上下文。这意味着组件无法感知到当前语言环境的变化，也无法获取到翻译函数。
解决方案：订阅 i18n 上下文或使用消息描述符
为了解决 t 宏不生效的问题，我们有两种主要的策略：
策略一：使用 useLingui() 钩子订阅组件
如果一个组件需要直接使用 t 宏进行翻译，或者需要访问 i18n 实例来执行更复杂的翻译逻辑，那么它必须通过 useLingui() 钩子来订阅 i18n 上下文。useLingui() 钩子会返回当前的 i18n 实例，以及一个 language 属性，确保组件在语言变化时能够重新渲染。
示例：在 DataComponent 中使用 useLingui 进行翻译
假设我们有一个 DataComponent，它接收一个消息描述符并需要将其翻译后显示。
// src/components/DataComponent.tsximport { MessageDescriptor } from "@lingui/core";import { useLingui } from "@lingui/react";import React from "react";type Props = { data: MessageDescriptor; // 接收一个消息描述符};export const DataComponent: React.FC = ({ data }) => { const { i18n } = useLingui(); // 使用 useLingui 钩子订阅 i18n 上下文 // 使用 i18n._ 方法翻译消息描述符 return {i18n._(data)}
;};
在这个例子中，DataComponent 通过 useLingui() 获得了 i18n 实例，然后使用 i18n._(data) 来翻译传入的 MessageDescriptor。这样，无论语言何时切换，DataComponent 都能正确地重新渲染并显示翻译后的文本。
小鸽子助手
一款集成于WPS/Word的智能写作插件
55 查看详情
策略二：使用 msg (或 defineMessage) 宏创建消息描述符
当您希望在组件外部（例如在 index.tsx 的根组件中，或者在不直接订阅 i18n 上下文的纯函数中）定义一个可翻译的字符串，并将其传递给其他组件进行翻译时，msg 宏就非常有用。msg 宏不会立即翻译文本，而是生成一个 MessageDescriptor 对象，该对象可以被传递并稍后通过 i18n._() 方法进行翻译。
示例：在 index.tsx 中使用 msg 宏并传递给 DataComponent
// src/index.tsximport React from 'react';import ReactDOM from 'react-dom/client';import reportWebVitals from './reportWebVitals';import { StoreProvider } from './components/store-provider';import createStore from './store';import { LanguageProvider } from './components/language-provider';import { LangSwitcher } from './components/lang-switcher';import { DataComponent } from './components/DataComponent';import { Trans, msg } from '@lingui/macro'; // 导入 msg 宏const store = createStore();const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement);root.render( hello world {/* 组件直接翻译 */}
{/* 使用 msg 宏创建 MessageDescriptor，并将其作为 prop 传递 */} );reportWebVitals();
在这里，index.tsx 使用 msg 宏创建了 hello react 的消息描述符，并将其作为 data prop 传递给了 DataComponent。DataComponent 内部再使用 useLingui() 钩子获取 i18n 实例，并调用 i18n._(data) 进行实际的翻译。
总结与最佳实践
组件：适用于直接渲染的静态文本内容，它会自动处理国际化并响应语言变化。t 宏：适用于在已订阅 i18n 上下文的 React 组件中进行即时翻译。如果组件没有通过 useLingui() 订阅上下文，t 宏可能无法正常工作。msg (或 defineMessage) 宏：当您需要在组件外部定义可翻译文本，或者需要将消息描述符作为数据传递给其他组件进行翻译时使用。它返回一个 MessageDescriptor 对象，该对象需要通过 i18n._() 方法进行实际翻译。useLingui() 钩子：是 React 组件获取 i18n 实例和订阅语言变化的核心机制。任何需要进行动态翻译或访问 i18n API 的组件都应使用此钩子。
通过理解这些不同的翻译机制及其适用场景，可以更有效地在 React 应用中利用 Lingui.js 实现全面的国际化。确保 lingui extract 和 lingui compile 命令在开发流程中正确执行，以生成和编译翻译文件。
以上就是Lingui.js 在 React 中 t 宏不生效的解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/744888.html
微信扫一扫 
支付宝扫一扫 
