React i18n 语言对象映射

Question

如何使用 React i18n 遍历 menu 对象项？这是 translation.json 文件的摘录：期望的结果是使用 .map(items) 循环输出带有 <ul><li></li></ul>

的翻译

{
  "lang": "lv",
  "menu": {
    "index": "galvene",
    "food_menu": "menu",
    "about_us": "par mums",
    "delivery": "piegāde"
  }
}

App 组件，我希望得到输出：

function App() {
    const { t, i18n } = useTranslation();
    const changeLanguage = (language) => {
        i18n.changeLanguage(language)
    };

  return (
      <div>
          /* The output should be here */
      </div>
  );
}

Answer 1

您可以导入 JSON 文件，然后迭代密钥。

import translations from "./translation.json";


function App() {
    const { t, i18n } = useTranslation();
    const changeLanguage = (language) => {
        i18n.changeLanguage(language)
    };

  return (
      <div>
          <ul>
            {Object.keys(translations.menu).map((key) => (
              <li>{t(key)}</li>
            ))}
          </ul>
      </div>
  );
}

React i18n 语言对象映射

React i18n language object mapping

javascript

internationalization

reactjs