Lingui.js 在 React 中 t 宏不生效的解决方案

在使用 Lingui.js 进行 react 应用国际化时，t 宏有时无法直接在非订阅组件中进行翻译，而 <Trans> 组件则工作正常。核心原因在于 t 宏需要组件能够访问 Lingui 的 i18n 上下文。本文将详细介绍如何通过 useLingui 钩子或 msg（defineMessage）宏结合 i18n._ 方法来正确处理动态或非直接渲染的翻译内容，确保所有文本都能被正确国际化。

理解 Lingui.JS 的翻译机制

lingui.js 提供了多种方式来实现国际化：

• <Trans> 组件：这是最直接且推荐的方式，用于包裹需要翻译的静态文本内容。它会自动订阅 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.tsx import { MessageDescriptor } from "@lingui/core"; import { useLingui } from "@lingui/react"; import React from "react";  type Props = {   data: MessageDescriptor; // 接收一个消息描述符 };  export const DataComponent: React.FC<Props> = ({ data }) => {   const { i18n } = useLingui(); // 使用 useLingui 钩子订阅 i18n 上下文    // 使用 i18n._ 方法翻译消息描述符   return <p>{i18n._(data)}</p>; };

在这个例子中，DataComponent 通过 useLingui() 获得了 i18n 实例，然后使用 i18n._(data) 来翻译传入的 MessageDescriptor。这样，无论语言何时切换，DataComponent 都能正确地重新渲染并显示翻译后的文本。

Chaos® Vantage

用实时光线追踪探索您的最复杂的3D场景。

37

查看详情

策略二：使用 msg (或 defineMessage) 宏创建消息描述符

当您希望在组件外部（例如在 index.tsx 的根组件中，或者在不直接订阅 i18n 上下文的纯函数中）定义一个可翻译的字符串，并将其传递给其他组件进行翻译时，msg 宏就非常有用。msg 宏不会立即翻译文本，而是生成一个 MessageDescriptor 对象，该对象可以被传递并稍后通过 i18n._() 方法进行翻译。

示例：在 index.tsx 中使用 msg 宏并传递给 DataComponent

// src/index.tsx import 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(     <React.StrictMode>         <StoreProvider store={store}>             <LanguageProvider>                 <LangSwitcher />                 <p>                     <Trans>hello world</Trans> {/* <Trans> 组件直接翻译 */}                 </p>                 {/* 使用 msg 宏创建 MessageDescriptor，并将其作为 prop 传递 */}                 <DataComponent data={msg`hello react`} />             </LanguageProvider>         </StoreProvider>     </React.StrictMode> );  reportWebVitals();

在这里，index.tsx 使用 msg 宏创建了 hello react 的消息描述符，并将其作为 data prop 传递给了 DataComponent。DataComponent 内部再使用 useLingui() 钩子获取 i18n 实例，并调用 i18n._(data) 进行实际的翻译。

总结与最佳实践

• <Trans> 组件：适用于直接渲染的静态文本内容，它会自动处理国际化并响应语言变化。
• t 宏：适用于在已订阅 i18n 上下文的 React 组件中进行即时翻译。如果组件没有通过 useLingui() 订阅上下文，t 宏可能无法正常工作。
• msg (或 defineMessage) 宏：当您需要在组件外部定义可翻译文本，或者需要将消息描述符作为数据传递给其他组件进行翻译时使用。它返回一个 MessageDescriptor 对象，该对象需要通过 i18n._() 方法进行实际翻译。
• useLingui() 钩子：是 React 组件获取 i18n 实例和订阅语言变化的核心机制。任何需要进行动态翻译或访问 i18n API 的组件都应使用此钩子。

通过理解这些不同的翻译机制及其适用场景，可以更有效地在 React 应用中利用 Lingui.js 实现全面的国际化。确保 lingui extract 和 lingui compile 命令在开发流程中正确执行，以生成和编译翻译文件。

以上就是Lingui.react javascript java html js typescript mac switch JavaScript typescript 字符串 JS 对象