antd 组件添加多语言 react-intl

package.json

@@ -51,6 +51,7 @@
     "react-app-polyfill": "^0.1.3",
     "react-dev-utils": "^6.1.0",
     "react-dom": "^16.6.0",
+    "react-intl": "^2.7.2",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "resolve": "1.8.1",

src/components/app/App.jsx

@@ -26,6 +26,7 @@ moment.locale('en');
 class App extends Component {
     constructor() {
         super();
+        sessionStorage.setItem("language","English");
         this.state = {
             menuLevel1: "trail",
             sideBar: "e-commerce",
@@ -37,7 +38,8 @@ class App extends Component {
             },
             collapsed: false,
             inlineCollapsed: false,
-            locale: null,
+            locale: undefined,
+            language: sessionStorage.getItem("language")
         };
     }
 
@@ -54,9 +56,19 @@ class App extends Component {
     };
 
     changeLocale = (e) => {
-        const localeValue = e.target.value;
-        this.setState({locale: localeValue});
-        if (!localeValue) {
+        e.stopPropagation();
+        let language = sessionStorage.getItem("language");
+        console.log('now language',language);
+        let local = language === "中文" ? zhCN : undefined;
+        console.log('local',local);
+        let changeLanguage = language === "中文" ? "English" :  "中文";
+        console.log('changeLanguage',changeLanguage);
+        sessionStorage.setItem("language",changeLanguage);
+        this.setState({
+            language:changeLanguage,
+            locale:local
+        });
+        if (!local) {
             moment.locale('en');
         } else {
             moment.locale('zh-cn');
@@ -117,6 +129,8 @@ class App extends Component {
     };
 
     render() {
+        const { locale,language } = this.state;
+        console.log('locale1',locale);
         return (
             <Router>
                 <Layout style={{minHeight: '100vh'}}>
@@ -136,38 +150,34 @@ class App extends Component {
                             <Menu.Item key="cloud-function"><Link to="/cloud-function">Cloud Function</Link></Menu.Item>
                             <Menu.Item key="data-storage"><Link to="/data-storage/">Data Storage</Link></Menu.Item>
                             <Menu.Item key="data-analysis"><Link to="/data-analysis/">Data Analysis</Link></Menu.Item>
-                            <Menu.Item key="monitor-notification"><Link to="/monitor-notification/">Monitor
-                                Notification</Link></Menu.Item>
+                            <Menu.Item key="monitor-notification"><Link to="/monitor-notification/">Monitor Notification</Link></Menu.Item>
                         </Menu>
 
-                        {/*<div className="change-locale">*/}
-                        {/*<span style={{ marginRight: 16 }}>Change locale of components: </span>*/}
-                        {/*<Radio.Group defaultValue={undefined} onChange={this.changeLocale}>*/}
-                        {/*<Radio.Button key="en" value={undefined}>English</Radio.Button>*/}
-                        {/*<Radio.Button key="cn" value={zhCN}>中文</Radio.Button>*/}
-                        {/*</Radio.Group>*/}
-                        {/*</div>*/}
+                        <div className="change-locale">
+                            <Button size="small" onClick={(e)=>this.changeLocale(e)}>{language}</Button>
+                        </div>
+
                         {/*<div className='login'>*/}
-                        {/*{*/}
-                        {/*this.state.hasLogin ?*/}
-                        {/*this.login(this.state.userID)*/}
-                        {/*:*/}
-                        {/*<div>*/}
-                        {/*<span style={{marginRight: 20}}>login:</span>*/}
-                        {/*<Input*/}
-                        {/*placeholder="id, eg: 'xy_1'"*/}
-                        {/*onChange={(e) => {*/}
-                        {/*// antd 获取不到 target，百度来的下面这句代码*/}
-                        {/*e.persist();*/}
-                        {/*this.setState({userID: e.target.value});*/}
-                        {/*}}*/}
-                        {/*onPressEnter={() => {*/}
-                        {/*this.setState({hasLogin: true})*/}
-                        {/*}}*/}
-                        {/*style={{width: 200}}*/}
-                        {/*/>*/}
-                        {/*</div>*/}
-                        {/*}*/}
+                            {/*{*/}
+                                {/*this.state.hasLogin ?*/}
+                                    {/*this.login(this.state.userID)*/}
+                                    {/*:*/}
+                                    {/*<div>*/}
+                                        {/*<span style={{marginRight: 20}}>login:</span>*/}
+                                        {/*<Input*/}
+                                            {/*placeholder="id, eg: 'xy_1'"*/}
+                                            {/*onChange={(e) => {*/}
+                                                {/*// antd 获取不到 target，百度来的下面这句代码*/}
+                                                {/*e.persist();*/}
+                                                {/*this.setState({userID: e.target.value});*/}
+                                            {/*}}*/}
+                                            {/*onPressEnter={() => {*/}
+                                                {/*this.setState({hasLogin: true})*/}
+                                            {/*}}*/}
+                                            {/*style={{width: 200}}*/}
+                                        {/*/>*/}
+                                    {/*</div>*/}
+                            {/*}*/}
                         {/*</div>*/}
                     </Header>
 
@@ -266,16 +276,19 @@ class App extends Component {
                         </Menu>
                     </Sider>
 
-                    <Layout style={{marginTop: '64px', zIndex: '0'}}>
-                        <Switch>
-                            <Route path="/" exact component={TrialCase}/>
-                            <Route path="/cloud-function" component={CloudFunction}/>
-                            <Route path="/data-storage/" component={DataStorage}/>
-                            <Route path="/data-analysis/" component={DataAnalysis}/>
-                            <Route path="/monitor-notification/" component={MonitorNotify}/>
-                            <Redirect path="*" to="/"/>
-                        </Switch>
-                    </Layout>
+                    <LocaleProvider locale={locale}>
+                        <Layout style={{marginTop: '64px', zIndex: '0'}} key={locale ? locale.locale : 'en'/* Have to refresh for production environment */} >
+                            <Switch>
+                                <Route path="/" exact component={TrialCase}/>
+                                <Route path="/cloud-function" component={CloudFunction}/>
+                                <Route path="/data-storage/" component={DataStorage}/>
+                                <Route path="/data-analysis/" component={DataAnalysis}/>
+                                <Route path="/monitor-notification/" component={MonitorNotify}/>
+                                <Redirect path="*" to="/"/>
+                            </Switch>
+                        </Layout>
+                    </LocaleProvider>
+
                 </Layout>
             </Router>
         );

src/components/app/index.css

@@ -12,5 +12,8 @@
 }
 
 .change-locale {
-    margin-bottom: 16px;
+    position: absolute;
+    top: 0;
+    right: 24px;
+    float: right;
 }

src/components/cloudFunction/api/Api.jsx

@@ -1,17 +1,23 @@
 import React, {Component} from 'react';
 
-class Api extends Component {
+import {  Pagination } from 'antd';
+
+export default class Api extends Component {
     constructor() {
         super();
+        this.state = {
+            locale: null,
+        };
     }
 
     render() {
         return (
-            <div>
-                api URL
+            <div className="locale-components">
+                <div className="example">
+                    antd ui 组件中英切换
+                    <Pagination defaultCurrent={1} total={50} showSizeChanger />
+                </div>
             </div>
-        )
+        );
     }
 }
-
-export default Api;

src/index.js

@@ -7,11 +7,52 @@ import * as serviceWorker from './serviceWorker';
 import ApolloClient from "apollo-boost";
 import { ApolloProvider } from "react-apollo";
 
+//如果浏览器没有自带intl，则需要在使用npm安装intl之后添加如下代码
+import { IntlProvider,addLocaleData } from 'react-intl';
+import intl from 'intl';
+import zh from 'react-intl/locale-data/zh';
+import en from 'react-intl/locale-data/en';
+import zh_CN from './language/zh_CN.js';
+import en_US from './language/en_US.js';
+addLocaleData([...en,...zh]);
+
+
 const client = new ApolloClient({
   // uri: "http://service-eucrnpse-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql"
   uri: "http://localhost:4000/graphql"
 });
 
-ReactDOM.render(<ApolloProvider client={client}><App /></ApolloProvider>, document.getElementById('root'));
+let browserLanguage = (navigator.language || navigator.browserLanguage).toLowerCase().split('-')[0];
+sessionStorage.setItem("language",browserLanguage);
+
+function chooseLocale(language) {
+    // console.log('language',language);
+    let locale,messages;
+    switch(language){
+        case 'en':
+            locale = 'en';
+            messages = en_US;
+            return {locale,messages};
+
+        case 'zh':
+            locale = 'zh';
+            messages = zh_CN;
+            return {locale,messages};
+
+        default:
+            locale = 'zh';
+            messages = zh_CN;
+            return {locale,messages};
+    }
+}
+let language = sessionStorage.getItem("language");
+
+ReactDOM.render(
+    <ApolloProvider client={client}>
+      <IntlProvider locale={chooseLocale(language).locale} messages={chooseLocale(language).messages} >
+        <App />
+      </IntlProvider>
+    </ApolloProvider>, document.getElementById('root')
+);
 
 serviceWorker.unregister();

src/language/en_US.js

@@ -0,0 +1,3 @@
+const en_US = {
+
+};

src/language/zh_CN.js

@@ -0,0 +1,3 @@
+const zh_CN = {
+
+};