当前位置: 首页 > Web前端 > JavaScript

Day97-100React+AntDesignPro多语言(中英文)切换Demo

时间:2023-03-27 01:15:45 JavaScript

(1)必填项需要中英文切换。项目需要中英文切换。满足英文显示和访问需求。(二)分析1、项目至少要支持中英文切换。2、需要切换的内容分为:组件的中英文切换;菜单、标题、表格等内容的中英文切换。(三)实现1.AntDesignPro组件库官方支持配置,链接如下:https://ant.design/components...2.菜单、标题等内容需要填写中英文版本——这两个文件分别对应不同文本的翻译内容。切换语言后,它们将显示不同。(4)代码1.在src文件夹下新建一个lang文件夹,里面有三个子文件//cn.tsexportdefault{box:'box',shortkey:'快捷键',batchEditAttr:'批量修改属性',selCheck:'采样',save:'Save',submit:'Submit',};//en.tsexportdefault{box:'box',shortkey:'shortkey',batchEditAttr:'batchEditAttr',selCheck:'selCheck',save:'save',submit:'submit',};//index.tsimportcnfrom'@/lang/cn';importenfrom'@/lang/en';exportdefault{'zh-cn':cn,恩,};2。src文件创建一个新的公共文件夹,其中包含处理多种语言的公共方法//antdLocale.tsimportenUSfrom'antd/lib/locale/en_US';importzhCNfrom'antd/lib/locale/zh_CN';从“@/lang/index”导入语言;从“时刻”导入时刻;exportconstlocaleMap={en:enUS,'zh-cn':zhCN,};导出常量utransLang=localStorage.utransLang?localStorage.utransLang:'zh-cn';exportconstsetLocaleLang=(item)=>{localStorage.utransLang=item;};exportconstgetLocalLang=()=>{consttmp=localStorage.utransLang?localStorage.utransLang:'zh-cn';窗口.lang=lang[tmp];//console.log(lang);//调试器;};exportconstgetAntdLang=()=>{getLocalLang();moment.locale(utransLang);returnlocaleMap[utransLang];};3、首页Demo//index.tsximportstylesfrom'./index.less';importReact,{useState}from'react';import{ConfigProvider,Button,DatePicker,Space,version,Radio,Col,Row,}from'antd';importtype{RadioChangeEvent}from'antd';importenUSfrom'antd/es/locale/en_US';importzhCNfrom'antd/es/locale/zh_CN';import{getAntdLang,getLocalLang,utransLang,setLocaleLang,}from'@/common/antdLocale';导出默认函数IndexPage(){if(!window.lang){getLocalLang();}console.log(window.lang);//调试器const[locale,setLocal]=useState(utransLang);constchangeLocale=(e:RadioChangeEvent)=>{console.log('changeLocale:',locale);constlocaleValue=e.target.value;//调试器setLocaleLang(localeValue.locale);getLocalLang();//常量href=window.location.href//location.href=location.hrefsetLocal(localeValue);};constsave=()=>{console.log('click');};return(

页面索引

antd版本:{version}

English中文save()}>{lang.submit}
);}