添加多语言暂未完成

src/components/app/App.jsx

@@ -5,16 +5,14 @@ import gql from "graphql-tag";
 import {Query} from "react-apollo";
 import moment from 'moment';
 import 'moment/locale/zh-cn';
+import { FormattedMessage } from 'react-intl';
 
 import CloudFunction from '../cloudFunction/CloudFunction';
 import MonitorNotify from '../monitorNotify/MonitorNotify';
 import DataAnalysis from '../dataAnalysis/DataAnalysis';
 import DataStorage from '../dataStorage/DataStorage';
 
-
-import GenerateJs from "../common/generateJs/GenerateJs";
 import zhCN from 'antd/lib/locale-provider/zh_CN';
-import logo from '../../images/logo.png';
 import '../common/graphql/index.css';
 import './index.css'
 import TrialCase from "../trialCase/TrialCase";
@@ -24,8 +22,8 @@ const {Header, Sider} = Layout;
 moment.locale('en');
 
 class App extends Component {
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
         sessionStorage.setItem("language","English");
         this.state = {
             menuLevel1: "trail",
@@ -64,6 +62,7 @@ class App extends Component {
         let changeLanguage = language === "中文" ? "English" :  "中文";
         console.log('changeLanguage',changeLanguage);
         sessionStorage.setItem("language",changeLanguage);
+        this.props.changeLanguage(changeLanguage);
         this.setState({
             language:changeLanguage,
             locale:local
@@ -147,10 +146,18 @@ class App extends Component {
                             style={{lineHeight: '64px'}}
                             onClick={(e) => this.switchMenu('menuLevel1', e)}
                         >
-                            <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="cloud-function">
+                                <Link to="/cloud-function"><FormattedMessage id="Cloud Function"/></Link>
+                            </Menu.Item>
+                            <Menu.Item key="data-storage">
+                                <Link to="/data-storage/"><FormattedMessage id="Data Storage"/></Link>
+                            </Menu.Item>
+                            <Menu.Item key="data-analysis">
+                                <Link to="/data-analysis/"><FormattedMessage id="Data Analysis"/></Link>
+                            </Menu.Item>
+                            <Menu.Item key="monitor-notification">
+                                <Link to="/monitor-notification/"><FormattedMessage id="Monitor Notification"/></Link>
+                            </Menu.Item>
                         </Menu>
 
                         <div className="change-locale">

src/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Component} from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './components/app/App'
@@ -7,9 +7,9 @@ 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';
+//如果浏览器没有自带intl，则需要在使用npm安装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';
@@ -23,36 +23,55 @@ const client = new ApolloClient({
 });
 
 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};
+
+class MainApp extends Component{
+    constructor() {
+        super();
+        sessionStorage.setItem("language",browserLanguage);
+        this.state = {
+            nowLanguage: sessionStorage.getItem("language")
+        };
+    }
+
+    changeLanguage = (language) => {
+        console.log("changeLanguage",language);
+        this.setState({language});
+    };
+
+    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};
+        }
+    };
+
+    render(){
+        let {nowLanguage} = this.state;
+        let {locale,messages} = this.chooseLocale(nowLanguage);
+        return(
+            <ApolloProvider client={client}>
+                <IntlProvider locale={locale} messages={messages} >
+                <App changeLanguage={()=>this.changeLanguage}/>
+                </IntlProvider>
+            </ApolloProvider>
+        )
     }
 }
-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')
-);
+
+ReactDOM.render(<MainApp />, document.getElementById('root'));
 
 serviceWorker.unregister();

src/language/en_US.js

@@ -1,3 +1,7 @@
 const en_US = {
-
-};
+    "Cloud Function":"Cloud Function",
+    "Data Storage":"Data Storage",
+    "Data Analysis":"Data Analysis",
+    "Monitor Notification":"Monitor Notification",
+};
+export default en_US;

src/language/zh_CN.js

@@ -1,3 +1,7 @@
 const zh_CN = {
-
-};
+    "Cloud Function":"云函数",
+    "Data Storage":"数据存储",
+    "Data Analysis":"数据分析",
+    "Monitor Notification":"监控通知"
+};
+export default zh_CN;