React(多语言)

公司项目使用react(多语言)，现在需要添加多语言，于是上网上搜了很多帖子和看了下官网，最终弄明白了使用方法，在这里记载一下.

安装：

npm install react-intl --save 
npm install react-router-dom --save-dev

载入环境-数据

import { BrowserRouter as Router } from 'react-router-dom'
import ToggleList from './common/ToggleList' 
import {IntlProvider, addLocaleData , FormattedMessage} from 'react-intl';
import en from 'react-intl/locale-data/en';
import zh from 'react-intl/locale-data/zh';
import zh_CN from '../locales/zh-CN';
import en_US from '../locales/en-US';
addLocaleData([...en, ...zh]);

语言转换目录

zh-CN文件(语言内容Json文件)

en-US文件(语言内容Json文件)

※语言通过this.state中得lang属性切换

render内代码

通过this.languageList连接的事件

引入：import {FormattedMessage} from 'react-intl';

文本中添加变量

首先引入
import {IntlProvider, addLocaleData , FormattedMessage} from 'react-intl';
import { BrowserRouter as Router } from 'react-router-dom'

<IntlProvider locale={this.state.lang} messages={messages[this.state.lang]}>
    <Router>
        <FormattedMessage id="tit" />            
    </Router>    
</IntlProvider>