如何在动态表单生成器中使用Lingui实现变量内容翻译？

核心问题在于Lingui依赖静态分析提取翻译文案，直接传递动态字符串变量（比如你配置里的"Type"、"Subtype"）无法被Lingui识别为翻译key。正确的做法是把字段配置中的文本替换为预定义的翻译key，再通过Lingui的API渲染翻译后的内容。

步骤1：修改字段配置，使用翻译key替代原始文本 #

将配置里的label（包括占位符、选项、错误信息等）替换为结构化的翻译key，方便Lingui识别和维护：

{
    category: "field",
    fieldType: "select",
    id: "appointmentType",
    testId: "appointmentType",
    name: "appointmentType",
    label: "form.fields.appointmentType.label", // 替换为翻译key
},
{
    category: "field",
    fieldType: "select",
    id: "other",
    testId: "other",
    name: "other",
    label: "form.fields.other.label", // 替换为翻译key
},

步骤2：在Lingui翻译文件中添加对应文案 #

在你的语言配置文件（比如src/locales/en/messages.json、src/locales/zh/messages.json）中，为每个key添加对应语言的翻译：

// 英文翻译示例
{
  "form.fields.appointmentType.label": "Type",
  "form.fields.other.label": "Subtype"
}

// 中文翻译示例
{
  "form.fields.appointmentType.label": "预约类型",
  "form.fields.other.label": "子类型"
}

运行lingui extract命令可以自动收集所有翻译key到对应文件，再手动填充翻译内容即可。

步骤3：在组件中使用Lingui渲染翻译内容 #

根据你的组件类型，选择合适的Lingui API：

函数组件（使用useLingui钩子） #

import { useLingui } from '@lingui/react';

const DynamicFormField = ({ fieldConfig }) => {
  const { t } = useLingui();
  const { label } = fieldConfig;

  return (
    <div className="form-field">
      {label && <label>{t(label)}</label>}
      {/* 其他字段渲染逻辑 */}
    </div>
  );
};

类组件或直接使用Trans组件 #

import { Trans } from '@lingui/react';

const DynamicFormField = ({ fieldConfig }) => {
  const { label } = fieldConfig;

  return (
    <div className="form-field">
      {label && <label><Trans id={label} /></label>}
      {/* 其他字段渲染逻辑 */}
    </div>
  );
};

注意事项 #

• 翻译key建议遵循统一命名规范（如表单名.字段名.文本类型），避免冲突且便于维护
• 对于下拉选项这类包含多个文本的字段，同样把每个选项的文本替换为翻译key，比如options: [{ value: "1", label: "form.fields.appointmentType.options.inPerson" }]
• 确保Lingui的配置正确，已加载对应语言的翻译文件

内容的提问来源于stack exchange，提问作者Ahmed Elbessfy