React-intl 实现多语言

React-intl 实现多语言

一、前言

最近做的一个react项目 有做国际化的需求。React 做国际化，我们项目使用的是React-intl ，这个库提供了 React 组件和Api两种方式来格式化日期，数字和字符串等。知道这个库了，那让我们开始使用它

详情可看网址 https://formatjs.io/docs/react-intl

二、使用

1.安装

npm install react-intl --save

2.添加引用

import {IntlProvider, addLocaleData} from 'react-intl'

3.添加 locale 配置文件

• 定义一个叫 zh-CN.js 的文件（名字自取）

const zh_CN = {
     'intl.hello': "你好",
     'intl.name': '我的名字是 {name}'
  }
export default zh_CN;

• 定义一个叫 en-US.js 的文件

 const en_US = {
     'intl.hello': "hello",
     'intl.name': 'my name is {name}'
 }    
 export default en_US; 

4.使用<IntlProvider />

1.这个组件用于设置 i18n 的上下文，它将包装应用程序的根组件，以便整个应用程序将配置在 i18n 的上下文中.
2.最主要的两个配置项是： loacle 当前的语言环境 messages 当前语言的内容。
3.我们要动态切换语言，需要动态改这两个配置。

• 样例：

import zhCN from './locale/zh.js';    //导入 i18n 配置文件
import enUS from './locale/en.js';

addLocaleData([...en, ...zh]);

export default class Root extends Component {
    static propTypes = {
        store: PropTypes.object.isRequired,
        history: PropTypes.object.isRequired
    }

    render() {
        const { store , history } = this.props;
        return (
            <IntlProvider locale='zh' messages={zhCN}>
                <Provider store={store}>
                    <Router history={history}>
                    </Router>
                </Provider>
            </IntlProvider>
        )
    }
}

5.使用<FormattedMessage />

• 基础用法： <FormattedMessage id="intl.hello"　defaultMessage={'hello'} />
  • 如果当前语言环境是 中文，它会显示你好 ，如果是英文环境，会显示Hello.
• 动态传值： <FormattedMessage id="intl.name" values={{name: <b>{name}</b>}} />
  • 我们定义 intl.name 的时候模板里用到了{name} ,这个代表我们可以动态传值，我们可以通过FormattedMessage中的 values 属性传一个JSON对象，这是就会动态显示我们的内容了

6.为什么不要直接使用 formatMessage 这个语法糖

1.虽然 formatMessage 使用起来会非常方便，但是它脱离了 react 的生命周期，
2.最严重的问题就是切换语言时无法触发 dom 重新渲染。
3.为了解决这个问题，我们切换语言时会刷新一下浏览器，用户体验很差，
4.所以推荐大家使用 useIntl 或者 injectIntl，可以实现同样的功能。

import { useIntl } from 'react-intl';

export default (props) => {
	// 为什么不要直接使用 formatMessage 这个语法糖？
	// 虽然 formatMessage 使用起来会非常方便，但是它脱离了 react 的生命周期，最严重的问题就是切换语言时无法触发 dom 重新渲染。为了解决这个问题，我们切换语言时会刷新一下浏览器，用户体验很差，所以推荐大家使用 useIntl 或者 injectIntl，可以实现同样的功能。
	const intl = useIntl();
	const t = (id) => intl.formatMessage({ id })  // 写成传参方式

	return (
		<div title={t('layout.user.link.privacy')}></div>

		// 官方文档写法如下
		<button type="primary">
	      {intl.formatMessage(
	        {
	          id: 'name',
	          defaultMessage: '你好，旅行者',
	        },
	        {
	          name: '旅行者',
	        },
	      )}
	    </button>
	)
}

formatMessage的第一个参数可以传入Id， 第二个参数传入 values