React四之配置国际化

程序员文章站 2022-06-16 09:21:30

...

前提
去除项目中admin模块相关页面及路由设置
1、删除vue-quick-start\src\views目录下的admin目录
2、删除vue-quick-start\src\views目录下的index.js(去除admin模块页面懒加载)

import Loadable from 'react-loadable';
import Loading from '../components/loading';

//需要将对外的普通组件需要进行懒加载
const Home = Loadable({
    loader: () => import('./home'),
    loading: Loading,
});

export {
    Home
}

3、修改vue-quick-start\src目录下的index.js(去除之前的路由配置)

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';

ReactDOM.render(
  <Router>
    <Switch>
      <Route path="/" component={App}/>
    </Switch>
  </Router>,
  document.getElementById('root')
);

reportWebVitals();

4、修改vue-quick-start\src\routes目录下的index.js(去除admin模块路由配置)

import  {
    Home,
} from "../views";   // 引入页面
  
export const mainRoute = [
    {
        pathname:"/home",
        component: Home
    }
];

国际化实现
1、安装依赖(使用 react-intl-universal库进行国际化)
项目根目录vue-quick-start\ 下执行 yarn add react-intl-universal
React四之配置国际化
2、国际化配置
react-quick-start\src下新建locales文件夹，在locales文件夹下en-US.json、zh-CN.json英文和中文两个语言文件
en-US.json

{
    "INPUT_MOBILE": "Mobile Number"
}

zh-CN.json

{
    "INPUT_MOBILE": "手机号"
}

3、初始化
react-quick-start\src目录下修改App.js,进行该库的初始化

import React, { Component } from 'react';
import { mainRoute } from './routes';
import {Route,Redirect,Switch} from 'react-router-dom';
import intl from 'react-intl-universal';
import './App.css';

// locale data
const locales = {
  "en-US": require('./locales/en-US.json'),
  "zh-CN": require('./locales/zh-CN.json'),
};

export default class App extends Component {
  
  state = {initDone: false}

  componentDidMount() {
    this.loadLocales();
  }

  loadLocales() {

    let currentLocale = intl.determineLocale({
      urlLocaleKey: "lang",
      cookieLocaleKey: "lang"
    });

    intl.init({ // react-intl-universal 是单例模式, 只应该实例化一次
      currentLocale,
      locales,
    })
    .then(() => {
	    this.setState({initDone: true});
    });
  }
  render() {
    return (
      <Switch>
        {
          mainRoute.map( (route, key)=>{
            return <Route path={route.pathname} component={route.component} key={key}/>
          })
        }
        <Redirect to={mainRoute[0].pathname} from='/' exact/>
      </Switch> 
    )
  }
};

4、调用和语言切换
修改react-quick-start\src\views\home目录下的index.js

import { Switch } from 'antd';
import { Component } from 'react';
import intl from 'react-intl-universal';
import Cookies from 'js-cookie';

let isChecked = Cookies.get('lang') === "zh-CN" ? true : false;

class Home extends Component {

    render() {
      return (
        <div>
            {intl.get('INPUT_MOBILE')}
            <Switch checkedChildren="中文" unCheckedChildren="英文" defaultChecked={isChecked} onClick = {(isChecked) => {
                this.handleClick(isChecked)
              }}/>
        </div>
      );
    }
    handleClick = (isChecked) => { // 国际化的点击事件
      let lang = "en-US";
      if(isChecked) {
        lang = "zh-CN";
      }
    	Cookies.set('lang', lang, { expires: 7 });
      window.location.reload(true);
  	} 
}

export default Home;