如何通过 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')

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

How can I translate object array in React through i18n?

i18next

reactjs