使用 useTranslation() 中的 t() 时出现 i18next "hooks" 错误

Question

我正在使用 React-i18next 库，我需要在函数内部获取翻译函数 t()。

export function translateCell(cell) {
  const { t } = useTranslation();
  return (t(cell));
}

使用 useTranslation() 时失败并出现错误

Hooks can only be called inside the body of a function component.

我尝试在初始化中使用 I18nextProvider 和 .use(initReactI18next)，但两种设置都会产生相同的错误。

是我用错了，还是我理解错了什么？

编辑： 我发现，只有将呈现为组件的函数才能使用 useTranslation。喜欢

function export MyComponent (cell) {
  const { t } = useTranslation();
  return (<div>{t(cell)}</div>);
}
...
render(){
<MyComponent/>

Answer 1

我找到了在初始化后导出 i18n 对象的解决方案，并在我需要的所有其他地方使用它。

文件i18nSetup.js:

i18n
    .use(initReactI18next)
    .init({
        resources: translationResources,
        interpolation: {
            escapeValue: false 
        }
    });

export default i18n;

在其他文件中:

import i18n from "../functions/i18nSetup";

export function translateCell(cell) {
  return (i18n.t(cell));
}

Answer 2

这样试试：

import { Trans } from 'react-i18next';

并像这样使用它：

<Trans>word-key</Trans>

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

使用 useTranslation() 中的 t() 时出现 i18next "hooks" 错误

react i18next "hooks" error when using t() from useTranslation()

internationalization

i18next

reactjs

react-i18next