2

我目前正在与React-intl v. ^4.7.6. 我有一个名为translations我所有语言环境翻译的文件夹。我用来IntlProvider根据用户的浏览器选择要加载的文件。似乎FormatttedMessage 或intl.formatMessage不能这样做。

这是我的翻译文件的样子。当然，每种语言都有一个。 transtions/eng.json 

{
  "header.about": "About",
  "header.resume": "Resume",
  "Education": [{
    "school": "ABC University",
    "degree": "(B.Eng)",
    "graduated": "2030 - Present",
    "location": "Canada",
    "description": [
      "d1",
      "d2"
    ]
  },
    {
      "school": "College",
      "degree": "Science",
      "graduated": "2030",
      "location": "Canada",
      "description": [
        "Graduated with honors"
      ]
    }]

[... other translations ...]
}
4

1 回答 1

0

我有另一种方法来解决您的问题。（虽然它可能不是最好的解决方案，也不是完全使用你的英语/德语翻译，但我认为它们是相似的）

首先我们可以定义一个包含所有本地化键的文件：

// i18n/keys.js 
export const student = {
 
  projects: [
    {
      name: "student.projects.0.name",
      desc: "student.projects.0.desc",
    },
    {
      name: "student.projects.1.name",
      desc: "student.projects.1.desc",
    },
  ],
};

export const localizationKeys = {
  student: student,
};

在 i18n 语言环境文件中，我们可以定义如下翻译：

// i18n/en/student.js
export const student = {
  projects: [
    {
      name: "Camera",
      desc: "Photo",
    },
    {
      name: "Foods",
      desc: "Apple",
    },
  ],
};

// i18n/zh_tw/student.js
export const student = {
  projects: [
    {
      name: "拍攝",
      desc: "照片",
    },
    {
      name: "食物",
      desc: "蘋果",
    },
  ],
};

将 i18n 中的翻译导出到 react-i18n 的语言环境模块

// i18n/en/index.js
import { student } from "./student";

const en = {
  general: general,
};

export default en;

// i18n/zh_tw/index.js
import { student } from "./student";

const zh_tw = {
  student: student,
};

export default zh_tw;

在您的 react 组件中，您可以访问本地化密钥 (keys.js) 以获取每个 i18n 密钥名称。

import React from "react";
import { useIntl } from "react-intl";
import { localizationKeys } from "./i18n/keys";
import { IntlProvider } from "react-intl";
import zh_tw from "./i18n/zh_tw";
import flatten from "flat";
import en from "./i18n/en";

const messages = {
  en: flatten(en),
  "zh-Hant-TW": flatten(zh_tw),
};

export default function ProjectShowcase() => {
  const intl = useIntl();
  const [locale, setLocale] = useState(navigator.language);
  const [mergedMessages, setMergedMessages] = useState(messages["en"]);

  useEffect(() => {
    // Merging english and current locale, avoid showing Text id if cannot look for the translate in locale file
    // In this case, it will always show EN translate as default if the text-id not found in a "zh_tw" locale
    setMergedMessages(Object.assign({}, messages["en"], messages[locale]));
  }, [locale]);
  
  return (
  <IntlProvider
      messages={mergedMessages}
      locale={locale}
      key={locale}
      defaultLocale="en"
    >
    {localizationKeys.student.projects.map((p, idx) => {
        return (
          <ul>
            <li>
              <span>
                {intl.formatMessage({
                  id: localizationKeys.student.projects[idx].name,
                })}
              </span>
              {` (${intl.formatMessage({
                id: localizationKeys.student.projects[idx].desc,
              })})`}
            </li>
          </ul>
        );
      })
    }
 </IntlProvider>
  )
}

我在 react-intl 上开发了一个小例子，你可能会在里面找到更多完整的代码：https ://github.com/applelok/react-localization

于 2020-10-13T05:21:13.823 回答