临桂地图翻译内容不显示

Question

我正在使用 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"
}

如有任何帮助，我将不胜感激。谢谢

Answer 1

问题是

t

宏在语言环境完全加载之前执行（假设描述等包含为 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>
          ))}