如何解决我如何在 react-i18next 中更改语言
首先我初始化 i18next inctance
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
const resources = {
en: {
translation: {
'Welcome to React': 'Welcome to React and react'
}
},de: {
translation: {
'Welcome to React': 'Bienvenue à React et react-i18next'
}
}
};
i18n.use(initReactI18next).init({
resources,lng: 'de',interpolation: {
escapeValue: false
}
});
export default i18n;
然后我在我的组件中使用带有 useTranslation 钩子的实例
import React from 'react'
import { useTranslation } from 'react-i18next'
import classes from './intro.module.scss'
export default function Intro() {
const { t,i18n } = useTranslation()
return (
<div className={classes.container}>
<div className={classes.innerContainer}>
<h1>{t('Welcome to React')}</h1>
</div>
</div>
)
}
那么现在如何将语言从我在 i18n 实例中初始化的默认语言更改为 de
我的导航栏上有一个按钮,我希望当我点击该按钮时,语言应该切换。
解决方法
你可以在 react-i18n 的文档中找到你需要的所有信息: https://react.i18next.com/legacy-v9/step-by-step-guide#d-let-the-user-toggle-the-language
您需要使用函数 i18n.changeLanguage() 并将所需语言作为道具传递。
,试试这个,在函数内部传递语言来调用不同的语言。
import React from 'react'
import { useTranslation } from 'react-i18next'
import classes from './intro.module.scss'
export default function Intro() {
const { t,i18n } = useTranslation()
const changeLanguageHandler = (lang) =>
{
i18n.changeLanguage("de")
}
return (
<div className={classes.container}>
<div className={classes.innerContainer}>
<h1>{t('Welcome to React')}</h1>
</div>
</div>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。