网站外链建设策略百度浏览器手机版

声明：此篇文章使用的版本是 "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

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

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