Question

我正在React项目中导入带有翻译的json，以便组织代码。但是useTranslation（）挂钩似乎并未读取这些导入的名称空间。

我如何做的一个例子：

i18n.js：

import i18next from 'i18next';
import {
  file1, 
  file2
} from 'translations';

i18next.init({
  interpolation: {
    escapeValue: false
  },
  lng: 'en',
  resources: {
    en: {
      file1: file1,
      file2: file 2
}
export default i18next;

使用useTanslator（）：

import React from 'react';
import { useTranslation } from 'react-i18next';

export function MyComponent() {
  const { t } = useTranslation();

  return
   <p>{t('file1:text')}</p>
   <p>{t('file2:file2.text')}</p>
}

它显示：

文本

file2.text

编辑：我已经添加了诸如useTranslation（“ file1”）之类的命名空间，但仍然无法正常工作。

Answer 1

调用挂钩时，您缺少名称空间。应该是：

useTranslation(["file1", "file2"])

Answer 2

您需要仔细检查i18n.js文件中的初始化参数。您应指定名称空间分隔符（nsSeparator），其余应遵循官方文档。

.init({
...........
 resources,
 ns: ['file1', 'file2'],
 defaultNS: 'file1',
 nsSeparator: ':'
..............
})

挂钩useTranslation（）不读取导入的名称空间-i18next

2 个答案: