如何用lingui.js翻译React中的静态提示语与占位符

DevOps 小满

2026-8-9

解决lingui.js中动态提示语和组件占位符的翻译配置问题

核心原因

你用i18n._()直接包裹字符串时，lingui的提取工具默认只会识别宏标记的内容（如<Trans>、t、defineMessage宏），普通字符串不会被扫描到PO文件中。下面针对两种场景给出具体配置方法：

场景1：按钮触发的动态提示语（如Toast.error）

改用@lingui/macro提供的t宏标记待翻译字符串，再传入i18n._()处理：

// 1. 引入t宏
import { t } from "@lingui/macro";
// 函数组件用useLingui hook获取i18n，类组件需通过withI18n高阶组件注入
import { useLingui } from "@lingui/react";

function MyComponent() {
  const { i18n } = useLingui();

  const handleClick = () => {
    // 2. 用t宏包裹原始字符串，再传给i18n._()
    Toast.error(i18n._(t`Please select security code preference`));
  };

  return <button onClick={handleClick}>Submit</button>;
}

如果需要复用该提示语，推荐用defineMessage宏定义，可读性更强：

import { defineMessage } from "@lingui/macro";

// 提前定义消息（支持自定义id，方便管理）
const securityCodeError = defineMessage({
  id: "toast.security.code.error",
  message: "Please select security code preference",
});

// 使用时
Toast.error(i18n._(securityCodeError));

场景2：输入组件的占位符（如Select的placeholder）

同样用t宏标记字符串，通过i18n._()生成翻译后的文本作为props传入：

import { useLingui } from "@lingui/react";
import { t } from "@lingui/macro";
import Select from "your-select-component";

function MyComponent() {
  const { i18n } = useLingui();

  return (
    <Select
      // 直接将翻译后的字符串赋值给placeholder属性
      placeholder={i18n._(t`Select security code preference`)}
    />
  );
}