React + React-intl @3.xx + TypeScript

声明:此篇文章使用的版本是 "react-intl": "^3.12.0"。

因为[email protected]版本相较于[email protected]版本差别较大,有些API是break change, 所以这篇文章的实现方式,不适用于[email protected]版本。

一: 安装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这个配置项里面去。如果不加的话,就会报错,比如我之前就得到一个错误:


因为缺少默认的库所得到的TS错误

但是,当我们像上面的代码那样,把那几个默认的库加入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(
   ,
   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 (
        <>
            
                
hello
) }; 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 (
        <>
            
                
); }; export default App;

把之前写死的"hello"去掉,替换成, 这里的id的值就是我们定义在messages里面文案对应的key.

因为我们的代码里暂时写死的
const locale = 'en';所以页面上会看到'hello', 如果改成
const locale = 'zh';就会看到‘你好’。
当然这里可以重构的东西很多,我们后面再做,先暂时这样。

4:日期(data)的格式化
React intl 提供三个格式化日期的组件:




5:时间的国际化
6:货币的国际化
7:复数的国际化

四:polyfill for old browser support

五: mobile support

你可能感兴趣的:(React + React-intl @3.xx + TypeScript)