You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用Lingui时,映射数组的阿拉伯语翻译无法显示

Lingui 数组内容阿拉伯语翻译不显示问题

我使用Lingui进行英文到阿拉伯语的翻译,通过对象数组展示内容。目前遇到的问题是:映射数组时,阿拉伯语翻译无法正常显示,始终显示英文。相关代码分布在以下文件中:

课程数组组件代码

import { t } from "@lingui/macro";
export const Courses = [
  {
    id: 0,
    name: t`Unlock the secrets of Open Science.`,
    description: t`A beginner-friendly course to introduce the concepts and practices of Open Science.`,
    icon: Github,
  },
  {
    id: 2,
    name: t`Your Open Science Journey Begins Here.`,
    description: t`Learn the basics of Open Science and start your journey towards more open and transparent research and education.`,
    icon: JavaScript,
  },
];

{Courses.map(({ id, name, icon, description }) => (
            <div key={id} className="courses-section__container-course">
              <div className="courses-section__container-course__icon-content">
                <img
                  src={icon}
                  className="courses-section__container-course__icon-content-icon"
                  alt={`${name} icon`}
                />
              </div>
              <h3 className="courses-section__container-course__name">
                {name}
              </h3>
              <p className="courses-section__container-course__description">
                {description}
              </p>
            </div>
          ))}

i18n.ts 配置文件

import { i18n } from "@lingui/core";
import { en, ar} from "make-plural/plurals";

export const locales = {
  en: "English",
  ar: "Arabic",
};
export const defaultLocale = "en";

i18n.loadLocaleData({
  en: { plurals: en },
  ar: { plurals: ar },
});

i18n.load(defaultLocale, {});
i18n.activate(defaultLocale);

export async function dynamicActivate(locale: string) {
  const { messages } = await import(`./locales/${locale}/messages.ts`);
  i18n.load(locale, messages);
  i18n.activate(locale);
}

.linguirc 配置文件

{
  "locales": ["en", "ar"],
  "sourceLocale": "en",
  "catalogs": [{
    "path": "src/locales/{locale}/messages",
    "include": ["src"]
  }],
  "format": "minimal",
  "compileNamespace": "ts"
}

内容的提问来源于stack exchange,提问作者sandy

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.28 07:35:13