Javascript React i18n语言对象映射

如何使用react i18n遍历

菜单

对象项？下面是

translation.json

文件的摘录：期望的结果是使用

.map（items）

循环，以

输出翻译

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

应用程序组件，我希望在以下位置获得输出：

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

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

函数应用程序（）{
const{t，i18n}=useTranslation（）；
常量更改语言=（语言）=>{
i18n.变更语言（语言）
};
返回(
/*输出应该在这里*/
);
}
您可以导入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>
  );
}

从“/translation.json”导入翻译；
函数App（）{
const{t，i18n}=useTranslation（）；
常量更改语言=（语言）=>{
i18n.变更语言（语言）
};
返回(

{Object.keys（translations.menu）.map（（key）=>(
{t（键）}
))}

);
}
请提供更多详细信息