声明：此篇文章使用的版本是 "react-intl": "^3.12.0"。
因为react-intl@3.xx版本相较于react-intl@2.xx版本差别较大，有些API是break change, 所以这篇文章的实现方式，不适用于react-intl@2.xx版本。
一: 安装react-intl
npm install --save react-intl
二: 配置typescript对react-intl的支持
react-intl is written in TypeScript, thus having 1st-class TS support.
In order to use react-intl in TypeScript, make sure your compilerOptions's lib config include ["esnext.intl", "es2017.intl", "es2018.intl"].
//tsconfig.json
{
"compilerOptions": {
"outDir": "./dis/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es6",
"jsx": "react",
"experimentalDecorators": true,
"lib": ["esnext.intl", "es2017.intl", "es2018.intl", "dom","es6","dom.iterable","scripthost"]
}
}
这里可以看到，我们不仅在"lib"这一项添加了文档上说的"esnext.intl", "es2017.intl", "es2018.intl"这三个，还添加了"dom","es6","dom.iterable","scripthost"。原因是这样的：
如果我们在compilerOptions里面没有特别指明lib这项的时候，TS的lib默认包含的是：
► For --target ES5: "dom","es5","scripthost"
► For --target ES6: "dom","es6","dom.iterable","scripthost"
所以，我们要把原本默认的其他库，也加入到lib这个配置项里面去。如果不加的话，就会报错，比如我之前就得到一个错误：
但是，当我们像上面的代码那样，把那几个默认的库加入lib，这个错就会得到解决。
三: 写代码
1: 创建index.tsx
//src/index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './components/app/App';
ReactDOM.render(
<App />,
document.getElementById("root")
);
index.tsx和我们没有使用i18n的项目没有差别。
2: 在App.tsx文件里面，把App包裹在IntlProvider里面
//src/components/app/App
import * as React from 'react';
import {IntlProvider} from "react-intl";
const App = () => {
const locale = 'en';
let messages = {
en: {
greeting: 'Hello',
},
zh: {
greeting: "你好"
}
};
return (
<>
<IntlProvider locale={locale} key={locale} messages={messages[locale]}>
<div>hello</div>
</IntlProvider>
</>
)
};
export default App;
现在我们的页面上有一行文字"hello",我们先放在这里，暂时还没有做国际化。我们引入了IntlProvider，把App的内容都包含在里面，且对其进行"locale","key"和"messages"三项属性的配置。
3：文字的国际化 -> FormattedMessage
import * as React from 'react';
import {IntlProvider, FormattedMessage} from "react-intl";
const App = () => {
const locale = 'en';
let messages = {
en: {
greeting: 'Hello',
},
zh: {
greeting: "你好"
}
};
return (
<>
<IntlProvider locale={locale} key={locale} messages={messages[locale]}>
<div><FormattedMessage id="greeting"/></div>
</IntlProvider>
</>
);
};
export default App;
把之前写死的"hello"去掉，替换成<FormattedMessage id="greeting"/>， 这里的id的值就是我们定义在messages里面文案对应的key.
因为我们的代码里暂时写死的
const locale = 'en';所以页面上会看到'hello', 如果改成
const locale = 'zh';就会看到‘你好’。
当然这里可以重构的东西很多，我们后面再做，先暂时这样。
4：日期(data)的格式化
React intl 提供三个格式化日期的组件：
<FormattedDate>
<FormattedTime>
<FormattedRelativeTime>
5：时间的国际化
6：货币的国际化
7：复数的国际化
