使用react-intl V5搭建国际化

介绍

react-intl提供项目国际化的能力

1、基本组件介绍

名称	功能
IntlProvider	为树设置I18N上下文。通常，此组件将包装应用程序的根组件，以便整个应用程序将在配置的I18N上下文中。以下是可以设置的I18N配置道具：
FormattedMessage	文本转换基础组件
FormattedDate	时间格式组件
其他	其他还有很多，详见官网

2、基本方法介绍

名称	功能
useIntl	提供intl实例，实例对象上面有很多方法

实操

1、安装react-intl

npm install react-intl@5 --save
yarn add react-intl@5

2、配置语言文件

在src目录下面，新建立一个locales目录，并创建index,language,等其他语言文件表。我的结构如下：

• language.ts: 包含需要支持语言的枚举：

export enum Locales{

   ENGLISH='en-us',
   CHINESE='zh-ch'
}

• index.ts : 最终需要导出的message内容：

import chUs from './ch-us';
import  { Locales } from './language';
import zhCh from './zh-ch';

const localesMessage={
    
    [Locales.CHINESE]:zhCh,
    [Locales.ENGLISH]:chUs
}

export default localesMessage;

• zh-ch.js|ch-us 分别对应不同语言的索引内容如：

export default {
    'home':'主页'
}
export  default {
    'home':'Home'
}

3、使用IntlProvider包裹根目录组件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import { IntlProvider } from 'react-intl';  //这里导入
import { Locales } from '@/locales/language';
import localesMessage from '@/locales';


const local=Locales.CHINESE; //使用那种语言


ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
       // messages 参数代表要使用那个语言的配置文件
       <IntlProvider messages={localesMessage[local]} locale={local} defaultLocale={local}>
        <App />
       </IntlProvider>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

4、使用FormattedMessage组件，达到语言翻译的效果

// 这里home会根据，上面写的配置文件，翻译成中文或者其他语言文案
<FormattedMessage id='home' />