国际化

对比

• 名称 实现方式 无感刷新 手动语言切换 迁移难度 使用方式

1. react-intl 使用hook

支持无感刷新
注入setLocale实现
需要包裹`<App />`组件

2. next-i18next

使用hook
支持无感刷新
自带changeLanguage()方法
在入口文件引入
函数

3. react-intl-universal

使用内置方法
不支持无感刷新
通过刷新地址栏实现
在入口文件引入
函数

1.next-i18next

https://github.com/i18next/next-i18next

2.react-intl-universal

react-intl-universal is a React internationalization package developed by Alibaba Group

yarn add react-intl-universal -s

准备langs语言包，在src文件夹下新建assets/locales，在locales文件夹下新建langs文件夹

// zh-CN.ts
const zh_CN = {
  hello: "你好"
}

export default zh_CN;

// en-US.ts
const en_US = {
  hello: "Hello"
}

export default en_US

import intl from 'react-intl-universal';
import zh_CN from './langs/zh_CN'
import en_US from './langs/en_US'

// common locale data
import 'intl/locale-data/jsonp/en.js'
import 'intl/locale-data/jsonp/zh.js'

// app locale data
const locales = {
  "en-US": en_US,
  "zh-CN": zh_CN
};

const locale = navigator.language;

intl.init({
  currentLocale: locale, // TODO: determine locale here
  locales,
}).then(() => {
    // After loading CLDR locale data, start to render
    console.log("Initialize the language pack!");
  });

在全局引入配置文件，在main.ts/index.ts中全局引入

import './index.less';
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';
import './assets/locales'


ReactDOM.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,
  document.getElementById('root'),
);


// 要使用国际化的页面
import React from 'react';
import http from 'services'
import intl from 'react-intl-universal'

const Welcome = () => {

  return (
    <div>
      {intl.get("name")}
    </div>
  );
};

export default Welcome;