如何在BASIC函数(而非组件)中使用react-i18next?

时间:2019-09-10 04:29:49

标签: react-i18next

我知道react-i18next可以在每个组件中工作:函数(带有useTranslation)和类组件(带有withTranslation()),但是我不能在这样的基本函数中使用翻译:

const not_a_component = () => {
  const { t } = useTranslation();
  return t('translation')
};

const translate = not_a_component();

错误钩子!

谢谢!

2 个答案:

答案 0 :(得分:1)

您可以只使用i18next库进行JavaScript翻译。 react-i18next只是i18next之上的包装器库。

下面是一个示例,如果您已经在使用react-i18next并且已对其进行了配置。

import i18next from "i18next";

const not_a_component = () => {
  const result = i18next.t("key");
  console.log(result);
  return result;
};

export default not_a_component;

如果您仅选择使用i18next,则可以简单地使用t函数。 这完全取决于您的要求。

import i18next from 'i18next';

i18next.init({
  lng: 'en',
  debug: true,
  resources: {
    en: {
      translation: {
        "key": "hello world"
      }
    }
  }
}, function(err, t) {
  // You get the `t` function here.
  document.getElementById('output').innerHTML = i18next.t('key');
});

希望有帮助!

答案 1 :(得分:1)

或者,您可以传递t作为附加参数:

const not_a_component = (t) => {
  return t('translation')
};

// Within a component
const { t } = useTranslation()
not_a_component(t)