index.js 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  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. class MainApp extends Component {
  22. constructor() {
  23. super();
  24. sessionStorage.setItem("language", browserLanguage);
  25. this.state = {
  26. nowLanguage: sessionStorage.getItem("language")
  27. };
  28. }
  29. changeLanguage = (language) => {
  30. // console.log("index changeLanguage",language);
  31. this.setState({
  32. nowLanguage: language
  33. });
  34. };
  35. chooseLocale = (language) => {
  36. let locale, messages;
  37. switch (language) {
  38. case 'en':
  39. locale = 'en';
  40. messages = en_US;
  41. return {locale, messages};
  42. case 'zh':
  43. locale = 'zh';
  44. messages = zh_CN;
  45. return {locale, messages};
  46. default:
  47. locale = 'zh';
  48. messages = zh_CN;
  49. return {locale, messages};
  50. }
  51. };
  52. render() {
  53. let {nowLanguage} = this.state;
  54. let {locale, messages} = this.chooseLocale(nowLanguage);
  55. return (
  56. <ApolloProvider client={client}>
  57. <IntlProvider locale={locale} messages={messages}>
  58. <App changeLanguage={this.changeLanguage}/>
  59. </IntlProvider>
  60. </ApolloProvider>
  61. )
  62. }
  63. }
  64. ReactDOM.render(<MainApp/>, document.getElementById('root'));
  65. serviceWorker.unregister();