我正在使用带有React-i18next的React
我的index.tsx文件包含一些组件,我可以在其中使用翻译功能
index.js
import React, { Suspense } from 'react'
import ReactDOM from 'react-dom';
import * as utils from './Utils';
import './i18n';
import { useTranslation, withTranslation, Trans } from 'react-i18next';
...
const { t, i18n } = useTranslation();
//I can use the translate function here
t("title");
//call a util function
utils.helperFunction(...);
...
这里一切都很好。 现在,我在另一个文件中创建了一些辅助功能
Utils.tsx
...
import { useTranslation, withTranslation, Trans } from 'react-i18next';
...
export function helperFunction(props: any){
//do stuff
//now I need some translation here - but useTranslation is not working?
const { t, i18n } = useTranslation();
t("needTranslation");
}
如何在助手函数中使用相同的翻译逻辑? (无需始终将t
函数传递给帮助方法)
还是在这里使用钩子是错误的方法?
发生以下错误
React Hook "useTranslation" is called in function "helperFunction" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
答案 0 :(得分:0)
您似乎忘记了报价t("needTranslation);
-> t("needTranslation");
运行您的代码后,我明白了为什么您的代码不起作用。如果要将组件逻辑提取到可重用的函数中,则应制作一个自定义钩子。有关更多信息,请查看docs。
import React from "react";
import ReactDOM from "react-dom";
import i18n from "i18next";
import "./i18n.js";
import { useTranslation, initReactI18next } from "react-i18next";
i18n
.use(initReactI18next)
.init({
resources: {
en: {
translation: {
title: "Hello world",
subtitle: "Hello stackoverflow"
}
}
},
lng: "en",
fallbackLng: "en",
interpolation: {
escapeValue: false
}
});
function App() {
const { t } = useTranslation();
useHelperFunction();
return <h1>{t("title")}</h1>;
}
// you need to turn the helper function into a hook
function useHelperFunction() {
const { t } = useTranslation();
return <h2>{t("subtitle")}</h2>;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
答案 1 :(得分:0)
我不再使用useTranslation
钩子解决了问题
相反,我将i18n
的斜体字移动到了文件(i18n.tsx-导出i18n
)
并将其导入并在我的Utils类中使用
我的 Utils.tsx 文件看起来像这样 Utils.tsx
...
import i18n from '../i18n';
...
export function helperFunction(props: any){
//do stuff
//use imported i18n and call the t() method
i18n.t("needTranslation");
}
i18n.tsx
import i18n from "i18next";
import Backend from 'i18next-xhr-backend';
import { initReactI18next } from 'react-i18next';
i18n
.use(Backend)
.use(initReactI18next) // passes i18n down to react-i18next
.init({
lng: "es",
fallbackLng: 'en',
backend: {
loadPath: '/static/locales/{{lng}}/{{ns}}.json'
},
interpolation: {
escapeValue: false
}
});
export default i18n;