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

理解 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 都能正确地重新渲染并显示翻译后的文本。

MagicStudio

图片处理必备效率神器！为你的图片提供神奇魔法

102

查看详情

策略二：使用 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.js 在 React 中 t 宏不生效的解决方案的详细内容，更多请关注php中文网其它相关文章！