React + React-intl @3.xx + TypeScript

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

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

一: 安装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(
   <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：复数的国际化

四：polyfill for old browser support

五: mobile support

最后编辑于：2025-02-24 21:40:05

© 著作权归作者所有,转载或内容合作请联系作者

喜欢的朋友记得点赞、收藏、关注哦！！！