react国际化中英文切换

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_45115705/article/details/101571120

react项目需要支持国际化，推荐插件“react-intl-universal”，原因是“react-intl”存在一些“致命”缺陷，官网有介绍。

下面具体介绍一下这款插件的详细使用

1. 安装

	npm install react-intl-universal --save

2. 初始化 语言配置
2.1. 配置语言包json配置文件

项目根目录新建配置文件如上图

2.2 英文配置文件 ./locales/en-US.json 如下

	{
    "SIMPLE": "Simple Sentence",
    "HTML": "This is <div>HTML</div>"
  	}

2.3 中文配置文件 ./locales/zh-CN.json 如下

	{
    "SIMPLE": "简单的句子",
    "HTML": "这是 <div>HTML</div>"
	}

2.4. 项目入口文件中配置国际化,来初始化

import React from 'react';
import intl from 'react-intl-universal';

const locales = {
  "en": require('./locales/en-US.json'),
  "zh": require('./locales/zh-CN.json'),
};
export default class App extends React.Component {
  state = {initDone: false}
  componentDidMount() {
    let lang =(navigator.language || navigator.browserLanguage).toLowerCase();
    if(lang.indexOf('zh')>=0)
    {
      // 假如浏览器语言是中文
      localStorage.setItem("defaultLng","zh")
    }else{
      // 假如浏览器语言是其它语言
      localStorage.setItem("defaultLng","en")
    }
  
    this.loadLocales();
  }

  loadLocales() {
    intl.init({
      currentLocale: localStorage.getItem('locale') || localStorage.getItem("defaultLng") ||  'zh', 
      locales,
    })
    .then(() => {
	  this.setState({initDone: true});
    });
  }
  render() {
    return (
      this.state.initDone && <div>
        {intl.get('SIMPLE')}
       </div>
    );
  }
}
		

3. 在组件中使用

3.1. 在组件中导入插件

	import intl from 'react-intl-universal';	

3.2. 在html中使用
纯文字情况：使用intl.get()

	<div> {intl.get('SIMPLE')} </div>

带html模板的文字,使用intl.getHTML()

	<div>{intl.getHTML('HTML')}</div>

更多API参考官网。

4. 点击切换中英文

html 是下拉框

 <Select style={{width: '80px'}} defaultValue={ this.state.locale }
	  value={ this.state.locale } 
	  onChange={this.handleChangeLang}>
   	   <Option value="zh">中文</Option>
       <Option value="en">英文</Option>
 </Select>

change事件实现切换中英文

	//切换中英文
    handleChangeLang = (val) => {
      this.setState(()=>{
        return {
          locale: val
        }
      })
      localStorage.setItem('locale', val)
      window.location.reload() 
    }

react国际化中英文切换配置完成。

PS：未来的你，一定会感谢今天拼命努力的自己！