React Umi國際化配置方法
更新時間：2024年04月02日 11:30:10 作者：hyupeng1006
這篇文章主要介紹了React Umi國際化配置方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
1、config.ts配置開啟umi國際化
export default defineConfig({
...,
locale: {
default: 'zh-CN',
antd: false,
title: false,
baseNavigator: true,
baseSeparator: '-',
}
})2、國際化文件配置
在src下創(chuàng)建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!'
}3、在函數(shù)組件中使用國際化-useIntl
import {useIntl} from 'umi';
const FunctionComponents = (props:any)=>{
const intl = useIntl();
return (
<>
{intl.formatMessage({id:'project.package.login.hello'})}
</>
)
}
export default FunctionComponents4、在類組件中使用國際化-injectIntl
import {injectIntl} from 'umi';
class FunctionComponents{
return (
<>
</>
)
}
export default injectInit(FunctionComponents)5、在ts文件中使用國際化-getIntl
import {getIntl} from 'umi';
export const DataException = {
hello: getIntl().formatMessage({id:'project.package.login.hello'})
} 6、動態(tài)設(shè)置國際化getLocale、setLocale
// 刷新頁面
setLocale('zh-CN', true);
// 不刷新頁面
setLocale('zh-CN', false);
console.log(getLocale()); // zh-CN到此這篇關(guān)于React Umi國際化配置的文章就介紹到這了,更多相關(guān)React Umi國際化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了使用Ant Design Anchor組件的一個坑及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了React項目搭建與Echarts工具使用詳解,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了React?Virtual?DOM前端框架全面分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
react.js 父子組件數(shù)據(jù)綁定實時通訊的示例代碼
本篇文章主要介紹了react.js 父子組件數(shù)據(jù)綁定實時通訊的示例代碼，2017-09-09
Vite+React搭建開發(fā)構(gòu)建環(huán)境實踐記錄
這篇文章主要介紹了Vite+React搭建開發(fā)構(gòu)建環(huán)境實踐,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
React immer與Redux Toolkit使用教程詳解
這篇文章主要介紹了React中immer與Redux Toolkit的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
React使用xlsx和js-export-excel實現(xiàn)前端導(dǎo)出
這篇文章主要為大家詳細(xì)介紹了React如何分別使用xlsx和js-export-excel實現(xiàn)前端導(dǎo)出功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2024-02-02
webpack 2.x配置reactjs基本開發(fā)環(huán)境詳解
本篇文章主要介紹了webpack 2.x配置reactjs基本開發(fā)環(huán)境詳解，具有一定的參考價值，有興趣的可以了解一下2017-08-08
解析TypeError:import_react_native.AppState.removeEventListener
這篇文章主要為大家介紹了TypeError:import_react_native.AppState.removeEventListener?is?not?a?function問題解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
這篇文章主要介紹了React中嵌套組件與被嵌套組件的通信過程，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07