react项目国际化

这里使用的react-intl

1、安装react-intl

npm install react-intl --save 或者 cnpm install react-intl --save

2、引入

在需要国际化的文件引入react-intl

需要全局国际化就在app.js文件中引入

import React, { Component } from "react";
import { IntlProvider } from "react-intl";class Page extends Component {render() {return (<IntlProvider><div></div></IntlProvider>)}
}

3、创建翻译数据文件

在src目录下新建一个文件夹i18n包含两个js文件一个locales.js 需要的语言一个messages.js需要翻译的数据

我这里是中文英语和尼泊尔语

//locales.js
export const LOCALES = {NEPAIL: "ne-Ne",CHINESE: "zh-CN",ENGLISH: "en",
};

//messages.js
import { LOCALES } from "./locales";export const messages = {[LOCALES.NEPAIL]: {chinese: "चिनियाँ",nepail: "नेपाली",change_lan: "एउटा भाषा छान्नुहोस्",station_name: "चार्जिङ स्टेशनको नाम",},[LOCALES.CHINESE]: {change_lan: "选择语言",chinese: "中文",nepail: "尼泊尔语",station_name: "电站名称",},[LOCALES.ENGLISH]: {change_lan: "languages",chinese: "chinese",nepail: "Nepail",station_name: "stationName",},
};

4、使用

使用FormattedMessage 组件，允许用户对简单到复杂的字符串和消息进行翻译和格式化

这个locale ，它接受一个字符串，决定了我们的应用程序是以什么语言呈现的。这里我使用select动态地改变这个值。

messages 对象包含一组准备在前台显示的翻译字符串。这些也将根据当前的语言环境动态地添加。

defaultLocale 道具是默认的locale，应该与应用程序的默认语言相匹配。

import React, { Component } from "react";
import { IntlProvider,FormattedMessage } from "react-intl";
import { LOCALES } from "../../i18n/locales";
import { messages } from "../../i18n/messages";class Page extends Component {constructor(props) {super(props);this.state = {//默认语言locale: LOCALES.CHINESE,};render() {const { locale } = this.state;return (<IntlProvider  messages={messages[locale]} locale={locale} //默认语言defaultLocale={locale.CHINESE}><div><span><span style={{ marginRight: "5px" }}><FormattedMessage id="change_lan" />:</span><SelectdefaultValue={1}placeholder={<FormattedMessage id="change_lan" />}onChange={(val) => {if (val === 1) {this.setState({locale: LOCALES.CHINESE,});} else if (val === 2) {this.setState({locale: LOCALES.NEPAIL,});} else if (val === 3) {this.setState({locale: LOCALES.ENGLISH,});}}}style={{ width: "150px" }}><Option value={1}>中文</Option><Option value={2}>Nepail</Option><Option value={3}>Engilish</Option></Select></span></div></IntlProvider>)}
}

5、占位符placeholder使用、message提示的使用

不能使用FormattedMessage因为返回的是一个html

首先使用injectIntl包装React组件， 注入intl上下文

import React, { Component } from "react";
import { Form,  Input, message } from "antd";
import { FormattedMessage, injectIntl } from "react-intl";class Add extends Component {constructor(props) {super(props);this.state = {};}onFinish = () => {this.props.form.validateFields((err, values) => {if (!err) {const msg2 = this.props.intl.formatMessage({ id: "save_success" });message.success(msg2, 5);this.props.form.resetFields();}});}});};render() {const { getFieldDecorator, setFieldsValue } = this.props.form;const placeholder = this.props.intl.formatMessage({ id: "input" });return (<div><Form  name="basic" onSubmit={this.onFinish}><Form.Item label={<FormattedMessage id="station_name" />}>{getFieldDecorator("name", {rules: [{ required: true, whitespace: true, message: <FormattedMessage id="required" />}],initialValue: "",})(<Input placeholder={placeholder} />)}</Form.Item></div>);}
}Add = Form.create({})(Add);export default injectIntl(Add);