如何通过 i18n 翻译 React 中的对象数组？

Question

我有一个关于通过 i18n 更改 React 中对象数组中的语言的问题。

我无法反应 useTranslation 的“t”功能。这就是为什么我有一个问题。

这是我的对象数组，如下所示。

import { useTranslation } from 'react-i18next';

export const CARD_DATA = [
  {
    'title': useTranslation.t('Card Data Title'), -> ERROR
    'icon': faCircleUser,
    'details': "I've studied Typography & Graphic Communication \
                at possibly the best Institution to do so in the \
                world - The University of Reading.",
    'color': '#e75d5d'
  },
  {
    'title': 'Responsive Web Design',
    'icon': faHeadphonesAlt,
    'details': 'I design future proof mobile first reponsive websites \
                to the latest web standards. I also keep up with \
                the most recent best practices.',
    'color': '#e75d5d'
  }
]

这是我的主页。

import { CARD_DATA } from '../data/CardData';

<div className={styles.cardGrid}>
    <CardGridView data={ CARD_DATA } />
</div>

这是我的 i18n 组件，如下所示。

i18n.use(initReactI18next).init({
    resources: {
      en: {
        translations: {
          'Card Data Title' : 'English'
        }
      },
      de: {
        translations: {
           'Card Data Title' : 'Deutsch'
        }
      }
    },
    fallbackLng: 'tr',
    ns: ['translations'],
    defaultNS: 'translations',
    keySeparator: false,
    interpolation: {
      escapeValue: false,
      formatSeparator: ','
    },
    react: {
      wait: true
    }
  });
  
export default i18n;

我该如何解决我的问题？

Answer 1

https://react.i18next.com/guides/quick-start

如果您需要从 React 组件外部访问 t 函数或 i18next 实例，您可以简单地导入./i18n.js并使用导出的 i18next 实例：

import i18next from './i18n'

i18next.t('my.key')

您可能还想监听 languageChanged 事件来重置适当的翻译，即

i18next.on('languageChanged', (lng) {
  i18next.t('my.key')
})