React-intl 解析语言环境文件中的 json 数组

Question

I'm currently working with React-intl v. ^4.7.6 . I have a folder called translations where all my locale translations are in. I use IntlProvider to select which file to load based on the user's browser. It seems like FormatttedMessage or intl.formatMessage can't do this.

Here is what my translation file looks like. Of course, there would be one for every language. 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 ...]
}

Answer 1

I have another approach to resolve your problem. (Though it might not be the best solution and it is not exactly using your en/ german translate, but i think they are similar)

First we can define a file with all localization keys:

// 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,
};

In i18n locale files, we can define the translations as below:

// 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: "蘋果",
    },
  ],
};

Export the translations in i18n to locale modules for 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;

In your react components, you can access your localization Keys (keys.js) to get back each of the i18n keys name.

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>
  )
}

I have developed a little example on the react-intl, you may find more completed code inside: https://github.com/applelok/react-localization