钩子使用翻译() 不读取导入的 i18下一个

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: ':'
..............
})

Answer 3

您需要对组件上的所有名称空间使用Translation钩子(第一个ns是默认值(。只需将您想要使用的所有命名空间添加到useTranslation钩子内的数组中。

const { t } = useTranslation(["file1", "file2"]);

我编辑你的代码

import React from 'react';
import { useTranslation } from 'react-i18next';
export function MyComponent() {
const { t } = useTranslation(["file1", "file2"]);
return
<p>{t('text')}</p> //or you can use t('text', {ns: "file1"})
<p>{t('file2.text', {ns: "file2"})}</p>
}

ns选项建议用于命名空间