npm i i18next react-i18next i18next-browser-languagedetector
{
"common": {
"personSetting": "个人设置",
"modifyPassword": "修改密码",
"currentTime": '当前时间是 {{time}}',
}
}{
"common": {
"personSetting": "Personal settings",
"modifyPassword": "change Password",
"currentTime": 'Current time is {{time}}',
}
}import en_common from './en-US/translation.json'
import zh_common from './zh-CN/translation.json'
export const langCommon = { en_common, zh_common }import { langCommon } from './locales/common' //公共需要翻译的内容
// 把所有的翻译资源集合
const resources = {
en: {
translation: {
...langCommon.en_common
},
},
zh: {
translation: {
...langCommon.zh_common
},
}
}
export { resources }export function initLangage() {
let lang = localStorage.getItem('language') || navigator.language // 获取浏览器的语言环境，兼容IE的写法
if (lang) {
lang = lang.substr(0, 2).toLowerCase() // 截取前两位字符，并转化为小写
return lang
} else {
return 'en'
}
}import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import LanguageDetector from 'i18next-browser-languagedetector';
import { resources } from '@/i18n/resources'
import { initLangage } from '@/utils'
i18n
// 检测用户当前使用的语言
// 文档: https://github.com/i18next/i18next-browser-languageDetector
.use(LanguageDetector)
// 注入 react-i18next 实例
.use(initReactI18next)
// 初始化 i18next
// 配置参数的文档: https://www.i18next.com/overview/configuration-options
.init({
resources, //资源初始化
lng: initLangage(),
interpolation: {
escapeValue: false, // react already safes from xss
},
react: {
useSuspense: false, // this will do the magic
},
debug: false,
})
export default i18nimport './i18n/i18n'
import { useTranslation } from 'react-i18next';
const SafetyManage: React.FC = (): React.ReactElement => {
const { t } = useTranslation();
return (
<div >
<Button
type="primary"
>
{t('common.personnalSetting')}
</Button>,
<Button
>
{t('common.modifyPassword')}
</Button>,
<p>
{t('common.currentTime', { time: dayjs().format('MM/DD/YYYY') })}
</p>
</div>
);
}
export default App;useTranslation 返回的对象包含一个 t 方法，这个方法可以翻译文本。
i18next 提供了插值的用法: 在 t 函数中传递第二个参数，它是一个对象。
参考文章：https://www.zadmei.com/qdizjsjz.html
到此这篇关于在 React 中使用 i18next的文章就介绍到这了,更多相关React 使用 i18next内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
编程 | 2023-02-24 21:36
编程 | 2023-02-21 12:51
编程 | 2023-02-21 12:47
编程 | 2023-02-21 00:15
编程 | 2023-02-21 00:08
编程 | 2023-02-20 21:46
编程 | 2023-02-20 21:42
编程 | 2023-02-20 21:36
编程 | 2023-02-20 21:32
编程 | 2023-02-20 18:12
Python之列表推导式最全汇总(上篇)
加载中,请稍侯......
网友评论