快捷導(dǎo)航

React Umi國(guó)際化配置方法

更新時(shí)間：2024年04月02日 11:30:10 作者：hyupeng1006

這篇文章主要介紹了React Umi國(guó)際化配置方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

1、config.ts配置開啟umi國(guó)際化

export default defineConfig({
    ...,
    locale: {
        default: 'zh-CN',
        antd: false,
        title: false,
        baseNavigator: true,
        baseSeparator: '-',
  }
})

2、國(guó)際化文件配置

在src下創(chuàng)建locales文件，如果項(xiàng)目配置了 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ù)組件中使用國(guó)際化-useIntl

import {useIntl} from 'umi';
const FunctionComponents = (props:any)=>{
    const intl = useIntl();
    return (
        <>
        {intl.formatMessage({id:'project.package.login.hello'})}
        </>
    )
}
export default FunctionComponents

4、在類組件中使用國(guó)際化-injectIntl

import {injectIntl} from 'umi';
class FunctionComponents{
    return (
        <>
        </>
    )
}
export default injectInit(FunctionComponents)

5、在ts文件中使用國(guó)際化-getIntl

import {getIntl} from 'umi';
export const DataException = {
    hello: getIntl().formatMessage({id:'project.package.login.hello'})
}

6、動(dòng)態(tài)設(shè)置國(guó)際化getLocale、setLocale

// 刷新頁(yè)面
setLocale('zh-CN', true);
// 不刷新頁(yè)面
setLocale('zh-CN', false);
console.log(getLocale()); // zh-CN

到此這篇關(guān)于React Umi國(guó)際化配置的文章就介紹到這了,更多相關(guān)React Umi國(guó)際化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

React?跨端動(dòng)態(tài)化核心技術(shù)實(shí)例分析
這篇文章主要為大家介紹了React?跨端動(dòng)態(tài)化核心技術(shù)實(shí)例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
一起來(lái)了解React的Hook
這篇文章主要為大家詳細(xì)介紹了React的Hook，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-03-03
淺談react-native熱更新react-native-pushy集成遇到的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談react-native熱更新react-native-pushy集成遇到的問(wèn)題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
詳解超簡(jiǎn)單的react服務(wù)器渲染(ssr)入坑指南
這篇文章主要介紹了詳解超簡(jiǎn)單的react服務(wù)器渲染(ssr)入坑指南，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02
如何去除富文本中的html標(biāo)簽及vue、react、微信小程序中的過(guò)濾器
這篇文章主要介紹了如何去除富文本中的html標(biāo)簽及vue、react、微信小程序中的過(guò)濾器,在vue及react中經(jīng)常會(huì)遇到，今天通過(guò)實(shí)例代碼給大家講解，需要的朋友可以參考下
2018-11-11
React Hooks使用常見的坑
React Hooks 是 React 16.8 引入的新特性，允許我們?cè)诓皇褂?Class 的前提下使用 state 和其他特性。接下來(lái)通過(guò)本文給大家分享React Hooks使用避坑指南，一起學(xué)習(xí)下吧
2021-06-06
React中的權(quán)限組件設(shè)計(jì)問(wèn)題小結(jié)
這篇文章主要介紹了React中的權(quán)限組件設(shè)計(jì),整個(gè)過(guò)程也是遇到了很多問(wèn)題，本文主要來(lái)做一下此次改造工作的總結(jié)，對(duì)React權(quán)限組件相關(guān)知識(shí)感興趣的朋友一起看看吧
2022-07-07
ios原生和react-native各種交互的示例代碼
本篇文章主要介紹了ios原生和react-native各種交互的示例代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-08-08
React?antd中setFieldsValu的簡(jiǎn)便使用示例代碼
form.setFieldsValue是antd?Form組件中的一個(gè)方法,用于動(dòng)態(tài)設(shè)置表單字段的值,它接受一個(gè)對(duì)象作為參數(shù),對(duì)象的鍵是表單字段的名稱,值是要設(shè)置的字段值,這篇文章主要介紹了React?antd中setFieldsValu的簡(jiǎn)便使用,需要的朋友可以參考下
2023-08-08
詳解React中Props的淺對(duì)比
這篇文章主要介紹了React中Props的淺對(duì)比的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下
2021-05-05