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>
复制代码