react项目国际化

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>
                  <Select
                    defaultValue={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);