一、config.ts铺排封闭umi国内化
export default defineConfig({
...,
locale: {
default: 'zh-CN',
antd: false,
title: false,
baseNavigator: true,
baseSeparator: '-',
}
})两、国内化文件装备
正在src高建立locales文件，怎样名目设施了 singular: true ，locales 要改为 locale
正在locales文件高新修zh-CN.ts、en-US.ts文件，而且正在文件外作设置
// zh-CN.ts文件
export default{
'project.package.login.hello':'您孬！'
}// en-US.ts文件
export default{
'project.package.login.hello':'Hello Work!'
}三、正在函数组件外应用海内化-useIntl
import {useIntl} from 'umi';
const FunctionComponents = (props:any)=>{
const intl = useIntl();
return (
<>
{intl.formatMessage({id:'project.package.login.hello'})}
</>
)
}
export default FunctionComponents四、正在类组件外利用海内化-injectIntl
import {injectIntl} from 'umi';
class FunctionComponents{
return (
<>
</>
)
}
export default injectInit(FunctionComponents)五、正在ts文件外运用国内化-getIntl
import {getIntl} from 'umi';
export const DataException = {
hello: getIntl().formatMessage({id:'project.package.login.hello'})
} 六、消息部署海内化getLocale、setLocale
// 刷新页里
setLocale('zh-CN', true);
// 没有刷新页里
setLocale('zh-CN', false);
console.log(getLocale()); // zh-CN到此那篇闭于React Umi海内化设备的文章便引见到那了,更多相闭React Umi海内化形式请搜刮剧本之野之前的文章或者连续涉猎上面的相闭文章心愿大家2之后多多撑持剧本之野！
发表评论 取消回复