index.js 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. import React, {Component} from 'react';
  2. import ReactDOM from 'react-dom';
  3. import './index.css';
  4. import App from './components/app/App'
  5. import * as serviceWorker from './serviceWorker';
  6. import ApolloClient from "apollo-boost";
  7. import {ApolloProvider} from "react-apollo";
  8. import {IntlProvider, addLocaleData} from 'react-intl';
  9. //如果浏览器没有自带intl,则需要在使用npm安装intl之后添加如下代码
  10. // import intl from 'intl';
  11. import zh from 'react-intl/locale-data/zh';
  12. import en from 'react-intl/locale-data/en';
  13. import zh_CN from './language/zh_CN.js';
  14. import en_US from './language/en_US.js';
  15. addLocaleData([...en, ...zh]);
  16. const client = new ApolloClient({
  17. // uri: "http://service-eucrnpse-1254337200.ap-guangzhou.apigateway.myqcloud.com/release/graphql"
  18. uri: "http://123.206.193.98:3000/graphql"
  19. });
  20. let browserLanguage = (navigator.language || navigator.browserLanguage).toLowerCase().split('-')[0];
  21. let language = browserLanguage === 'zh'? "中文" : "English";
  22. class MainApp extends Component {
  23. constructor() {
  24. super();
  25. sessionStorage.setItem("language", language);
  26. this.state = {
  27. language: sessionStorage.getItem("language")
  28. };
  29. }
  30. changeLanguage = (language) => {
  31. // console.log("index changeLanguage",language);
  32. this.setState({
  33. language: language
  34. });
  35. };
  36. chooseLocale = (language) => {
  37. let locale, messages;
  38. switch (language) {
  39. case "English":
  40. locale = 'en';
  41. messages = en_US;
  42. return {locale, messages};
  43. case "中文":
  44. locale = 'zh';
  45. messages = zh_CN;
  46. return {locale, messages};
  47. default:
  48. locale = 'zh';
  49. messages = zh_CN;
  50. return {locale, messages};
  51. }
  52. };
  53. render() {
  54. let {language} = this.state;
  55. let {locale, messages} = this.chooseLocale(language);
  56. return (
  57. <ApolloProvider client={client}>
  58. <IntlProvider locale={locale} messages={messages}>
  59. <App language={language} changeLanguage={this.changeLanguage}/>
  60. </IntlProvider>
  61. </ApolloProvider>
  62. )
  63. }
  64. }
  65. ReactDOM.render(<MainApp/>, document.getElementById('root'));
  66. serviceWorker.unregister();