Javascript 在不刷新页面的情况下更新翻译（i18next with react）

我的

\u nav.js

文件：

import i18n from '../../services/Translator';

export default {
  items: [
    {
      name: i18n.t('DASHBOARD'),
      url: '/dashboard',
      icon: 'icon-speedometer',
    },
    {
      name: i18n.t('SCHEDULE'),
      url: '/schedule',
      icon: 'icon-calendar',
    },
    {
      name: i18n.t('USERS'),
      url: '/users',
      icon: 'icon-user',
    },
    {
      name: i18n.t('LEASING_COMPANY'),
      url: '/company',
      icon: 'icon-organization',
    },
  ],
};

我的组成部分：

import { translate } from 'react-i18next';
import nav from '../Sidebar/_nav';
/...
render() {
  const test = nav.items.map((item) => {
    return <li key={item.url}>{item.name}</li>;
  });

  return (
    <ul>{test}</ul>
  );
}

---

我还将我的更改语言按钮放在页面的标题组件上。

不能这样工作……您可以将翻译分配给_nav.js内数组中的对象

这些将是字符串—任何代码都无法更新这些值—您需要在语言更改时重新生成这些值，或者：

import i18n from '../../services/Translator';

export default {
  items: [
    {
      name: 'DASHBOARD',
      url: '/dashboard',
      icon: 'icon-speedometer',
    },
    {
      name: 'SCHEDULE',
      url: '/schedule',
      icon: 'icon-calendar',
    },
    {
      name: 'USERS',
      url: '/users',
      icon: 'icon-user',
    },
    {
      name: 'LEASING_COMPANY',
      url: '/company',
      icon: 'icon-organization',
    },
  ],
};

及

从'react-i18next'导入{translate}；
从“../Sidebar/_nav”导入导航；
/...
render（）{
常量测试=导航项目地图（（项目）=>{
返回
{t（item.name）}
；
});
返回(
{test}
);
}

不能这样工作……您将翻译分配给_nav.js内数组中的对象

这些将是字符串—任何代码都无法更新这些值—您需要在语言更改时重新生成这些值，或者：

import i18n from '../../services/Translator';

export default {
  items: [
    {
      name: 'DASHBOARD',
      url: '/dashboard',
      icon: 'icon-speedometer',
    },
    {
      name: 'SCHEDULE',
      url: '/schedule',
      icon: 'icon-calendar',
    },
    {
      name: 'USERS',
      url: '/users',
      icon: 'icon-user',
    },
    {
      name: 'LEASING_COMPANY',
      url: '/company',
      icon: 'icon-organization',
    },
  ],
};

及

从'react-i18next'导入{translate}；
从“../Sidebar/_nav”导入导航；
/...
render（）{
常量测试=导航项目地图（（项目）=>{
返回
{t（item.name）}
；
});
返回(
{test}
);
}

您能分享一下您在哪里更改了语言、更改了哪个组件以及对此表示的歉意吗！我已经更新了我的问题，你能分享一下你在哪里更改了语言，哪个组件，对此我感到非常抱歉！我已经更新了我的问题

import { translate } from 'react-i18next';
import nav from '../Sidebar/_nav';
/...
render() {
  const test = nav.items.map((item) => {
    return <li key={item.url}>{t(item.name)}</li>;
  });

  return (
    <ul>{test}</ul>
  );
}