在组件树之外的实用函数中使用react-i18next,可以通过使用i18next的API来实现国际化功能。以下是一种常见的做法:
import i18next from 'i18next';
t
函数来翻译文本。t
函数接受一个字符串作为参数,返回对应的翻译结果。function myUtilityFunction() {
const translatedText = i18next.t('hello');
console.log(translatedText);
}
import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
i18next
.use(initReactI18next)
.init({
resources: {
en: {
translation: {
hello: 'Hello World'
}
},
zh: {
translation: {
hello: '你好世界'
}
}
},
lng: 'en',
fallbackLng: 'en'
});
在上述示例中,我们定义了两种语言的翻译资源:英文和中文。lng
参数指定了默认语言为英文,fallbackLng
参数指定了如果当前语言没有对应的翻译资源时,使用的回退语言。
I18nextProvider
组件,并传递了i18next实例作为prop。import { I18nextProvider } from 'react-i18next';
ReactDOM.render(
<I18nextProvider i18n={i18next}>
<App />
</I18nextProvider>,
document.getElementById('root')
);
通过以上步骤,你就可以在组件树之外的实用函数中使用react-i18next进行国际化了。记得在实用函数中导入i18next库,并使用i18next.t
函数来翻译文本。
领取专属 10元无门槛券
手把手带您无忧上云