react-intl——react国际化使用方案

国际化介绍

i18n:internationalization 国家化简称,首字母+首尾字母间隔的字母个数+尾字母,类似的还有 k8s(Kubernetes) <br />
React-intl是 React 中最受欢迎的库。

使用步骤

  • 安装

    # use npm
    npm install react-intl -D
    # use yarn
    
  • 项目入口文件配置

    // index.tsx
    import React from "react";
    import ReactDOM from "react-dom";
    import { IntlProvider } from "react-intl";
    import App from "src/App";
    import { getCurrentLang, getCurrentMessages } from "src/locales";
    import "./styles/index.less";
    
    const root = (
      <IntlProvider locale={getCurrentLang()} messages={getCurrentMessages()}>
        <App />
      </IntlProvider>
    );
    
    ReactDOM.render(root, document.getElementById("root"));
    

    IntlProvider 有三个配置参数:

    • locale, <string>, 语言标记,例如 'zh-CN' 'en-US'
    • messages, <object>, 国际化所需的 key-value 对象
    • formats, <object>, 自定义 format,比如日期格式、货币等
  • 在 src/locales 中创建国际化文件,一般有 en 和 zh,如

    ├─src
    │  ├─en
    │  │  ├─index.ts
    │  ├─zh
    │  │  ├─index.ts
    |  |------index.ts
    

    添加键值对并导出

    // zh/index.ts
    export default {
      whatever: `你好 {placeholder}`,
    };
    
    // locales/index.ts
    import zh from './zh';
    import en from './en';
    
    import ls from 'src/utils/localStore';
    import { createIntl, createIntlCache } from 'react-intl';
    
    const _currentLang = ls.getItem('qs_lang') || 'zh-CN';
    const messages = {
      'zh-CN': zh,
      'en-US': en,
    };
    export const getCurrentLang = () => _currentLang;
    export const getCurrentMessages = () => messages[_currentLang];
    
    const cache = createIntlCache();
    const intl = createIntl(
      {
        locale: _currentLang,
        messages: getCurrentMessages(),
      },
      cache
    );
    
    export default intl;
    
  • 接着在组件中就可以使用FormattedMessage等组件

    import React from "react";
    import { FormattedMessage } from "react-intl";
    
    const App = () => {
      return (
        <FormattedMessage
          id="whatever"
          description="hello world"
          defaultMessage="Hello {placeholder}"
          values={{ placeholder: "world" }}
        />
      );
    };
    
    export default App;
    

    或者在函数式组件中使用 hooks

    import { useIntl } from "react-intl";
    
    const App = () => {
      const { formatMessage: f } = useIntl();
      return (
        <>
          {f(
            {
              id: "whatever",
              description: "hello world",
              defaultMessage: "Hello {placeholder}",
            },
            { placeholder: "world" }
          )}
        </>
      );
    };
    
    export default App;
    
    • <FormattedMessage>组件中可以通过values属性来传值,如以上例子传递{placeholder: 'world'},渲染到对应的你好 {placeholder}位置
    • formatMessage中传递第二个参数作为占位符的入参

如何在非组件中使用 react-intl

例如我需要在组件目录下添加constants.ts文件来管理静态变量,而且需要国际化处理,因为它不是 react 组件,所以是没法用以上的方法处理。

这时候就需要使用createIntl来处理,createIntl 允许在不使用 Provider 的情况下创建 IntlShape 对象,它返回一个可以在 React 组件外部使用的对象。

// locales/index.ts
import { createIntl, createIntlCache } from 'react-intl';
...
const cache = createIntlCache();
const intl = createIntl(
  {
    locale: _currentLang,
    messages: getCurrentMessages(),
  },
  cache
);

export default intl;

在非组件文件中使用时

// xxx/constants.ts
import intl from "src/locales";

const a = intl.formatMessage(
  { id: "whatever", defaultMessage: "你好 {world}" },
  { placeholder: "world" }
);

更多

react-intl还能处理像货币、时间、数字等等各种国际化问题,更多请参考官方文档

github上的demo

antd 国际化方案

参考国际化

其实就是使用 React 的 context 特性,只需要一个 Provider Component,用它来提供国际化的上下文。

import zhCN from "antd/es/locale/zh_CN";

return (
  <ConfigProvider locale={zhCN}>
    <App />
  </ConfigProvider>
);

react-intl结合antd使用

以上步骤完成后,在切换语言为英文时,react-intl中使用的国际化文案正常显示。但此时会发现antd中组件依然显示的是中文,因为此时我们还没有对antd组件的国际化进行处理。

  1. src/locales中导出antd相关的国际化文案

  2. 在入口文件index.tsx中antd全局配置组件中引入即可

    // src/locales/index.ts
    import zh from './zh';
    import en from './en';

    import enUS from 'antd/es/locale/en_US';
    import zhCN from 'antd/es/locale/zh_CN';
    import ls from 'src/utils/localStore';
    import { createIntl, createIntlCache } from 'react-intl';

    const _currentLang = ls.getItem('qs_lang') || 'zh-CN';
    export const getCurrLang = () => _currentLang;

    const messages = {
    'zh-CN': zh,
    'en-US': en,
    };

    export const antMessages = {
    'zh-CN': zhCN,
    'en-US': enUS,
    };

    export const getAntMessages = () => antMessages[_currentLang];

    export const getCurrentMessages = () => messages[_currentLang];
    ...

    // src/index.tsx
    import React from "react";
    import ReactDOM from "react-dom";
    import { IntlProvider } from "react-intl";
    import App from "src/App";
    import { ConfigProvider } from "antd";
    import { getCurrentLang, getCurrentMessages, getAntMessages } from "src/locales";
    import "./styles/index.less";

    const root = (
    <IntlProvider locale={getCurrentLang()} messages={getCurrentMessages()}>
    <ConfigProvider locale={getAntMessages()}>
    <App />
    </ConfigProvider>
    </IntlProvider>
    );

    ReactDOM.render(root, document.getElementById("root"));

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

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

相关推荐
minDuck几秒前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
白子寰5 分钟前
【C++打怪之路Lv14】- “多态“篇
开发语言·c++
王俊山IT17 分钟前
C++学习笔记----10、模块、头文件及各种主题(一)---- 模块(5)
开发语言·c++·笔记·学习
为将者,自当识天晓地。19 分钟前
c++多线程
java·开发语言
小政爱学习!21 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
daqinzl27 分钟前
java获取机器ip、mac
java·mac·ip
k093336 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
zmd-zk41 分钟前
kafka+zookeeper的搭建
大数据·分布式·zookeeper·中间件·kafka
激流丶43 分钟前
【Kafka 实战】如何解决Kafka Topic数量过多带来的性能问题?
java·大数据·kafka·topic
神奇夜光杯44 分钟前
Python酷库之旅-第三方库Pandas(202)
开发语言·人工智能·python·excel·pandas·标准库及第三方库·学习与成长