react 主流国际化库的使用与对比

已于 2022-09-26 21:17:16 修改
阅读量2.1k 收藏 6
点赞数 1
分类专栏： reac技术栈学习 文章标签： react.js javascript 前端
于 2021-08-12 16:14:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/muou_hang/article/details/119647094
版权

如有错误，请留言指出，感谢您的反馈

1. react-i18next的使用

优点：使用hook方式，简单易用。提供方法更改语言，不用手动实现

  1. 安装插件

    npm install react-i18next i18next --save
// 或者
yarn add react-i18next i18next

  2. 在assets新建locales文件夹，存放locale语言包

    // locales/en-US.json
{
	"hello":"Hello"
}
// locales/zh-CN.json
{
	"hello":"你好"
}

  3. 在locales下新建resources.js

    import enUS from './en_US.json';
import zh from './zh_CN.json';

const resources = {
  'en-US': {
    translation: enUS,
  },
  'zh-CN': {
    translation: zh,
  },
  zh: {
    translation: zh,
  },
};

export default resources;

  4. 在src目录下新增i18n.ts

    import { initReactI18next } from 'react-i18next';
import i18n from 'i18next';
import resources from 'assets/locales/resources.js';
// the translations
// (tip move them in a JSON file and import them,
// or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)

let localLang = sessionStorage.getItem('lang');
const browserLang = navigator.language;
if (!localLang) {
  localLang = browserLang === 'zh-CN' ? 'zh-CN' : 'en-US';
}

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: localLang, // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
    // if you're using a language detector, do not define the lng option

    interpolation: {
      escapeValue: false, // react already safes from xss
    },
  });

export default i18n;

  5. 在main.ts/index.ts中全局导入 i18n.ts

    import './index.less';
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';
import './i18n'  // 新增：导入i18n

ReactDOM.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

  6. 在要使用国际化的页面使用useTranslation hook

    import { useTranslation } from 'react-i18next';

const Welcome = () => {
  const [t, i18n] = useTranslation()
  return (
    <div>
     国际化测试数据： {t('hello')}
    </div>
  );
};
export default Welcome;

// 页面结果显示： 中文-> 国际化测试数据：你好；英文：-> 国际化测试数据：Hello

  7. 语言包切换

    在需要执行切换的界面导入``useTranslationhook，并绑定事件toggleI18n`

    // 顶部导入 useTranslation
import { useTranslation } from 'react-i18next';

// 组件内部使用hook
const [t, i18n] = useTranslation()

// 在事件方法中使用i18n.changeLanguage()方法
const toggleI18n = () => {
    const locale = i18n.language === "zh-CN" ? "en-US" : "zh-CN";
    i18n.changeLanguage(locale)
 }

    简单的例子：

    import React from 'react';

// 顶部导入 useTranslation
import { useTranslation } from 'react-i18next';

const Layout: FC<any> = (props: PropsWithChildren<any>) => {
  
  // 组件内部使用hook
  const [t, i18n] = useTranslation();
  
  // 在事件方法中使用i18n.changeLanguage()方法
  const toggleI18n = () => {
    const locale = i18n.language === "zh-CN" ? "en-US" : "zh-CN";
    i18n.changeLanguage(locale)
  }

  return (
    <div>
      <button onClick={toggleI18n}> i18n切换 </button>
    </div>
  );
};

export default Layout;

2. React-intl-universal

优点：配置简单、易上手、迁移简单、支持变量翻译

缺点：切换语言时较为繁琐

  1. 安装插件

    npm install react-intl-universal --save
// or 

yarn add react-intl-universal -s

  2. 准备langs语言包，在src文件夹下新建assets/locales，在locales文件夹下新建langs文件夹

    // zh-CN.ts
const zh_CN = {
  hello: "你好"
}
export default zh_CN;

// en-US.ts
const en_US = {
  hello: "Hello"
}
export default en_US

  3. 编写配置文件，在locales中增加index.ts文件

    import intl from 'react-intl-universal';
import zh_CN from './langs/zh_CN'
import en_US from './langs/en_US'

// common locale data
import 'intl/locale-data/jsonp/en.js'
import 'intl/locale-data/jsonp/zh.js'

// app locale data
const locales = {
  "en-US": en_US,
  "zh-CN": zh_CN
};

const locale = navigator.language;


intl.init({
  currentLocale: locale, // TODO: determine locale here
  locales,
})
  .then(() => {
    // After loading CLDR locale data, start to render
    console.log("Initialize the language pack!");
  });

  4. 在全局引入配置文件，在main.ts/index.ts中全局引入

    import './index.less';
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';
import './assets/locales'


ReactDOM.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

  5. 封装方法（可省略），在locales下新建utils.ts文件

    import intl from 'react-intl-universal'

const options = intl.getInitOptions();

/**
 * Change Language
 * @param history The history of react, you can use <useHistory> to get.
 * @param locale Language to be convered
 */
export function setLocale(history: any, locale: string) {
  intl.init({ currentLocale: locale, locales: options.locales }).then(() => {
    history.push(history.location.pathname)
  })
}

/**
 * Get the value with key from the locales pack
 * @param key : The key in locales pack
 * @returns The value find by the key in locales
 */
export function get(key: string) {
  return intl.get(key);
}

  6. 在页面中使用

    // 要使用国际化的页面
import React from 'react';
import http from 'services'
import { get } from 'assets/locales-universal/utils'

const Welcome = () => {

  return (
    <div>
      {get("name")}
    </div>
  );
};

export default Welcome;

  7. 如何手动切换语言

    // 需要切换的页面
// 顶部导入自定义方法setLocale
import { setLocale } from 'assets/locale-universal/utils';

// 使用自定义方法设置语言
const toggleI18n = () => {
    const locale = locale==="zh-CN"?"en-US":"zh-CN";
   setLocale(locale)
 }

    简单的例子：

    import React from 'react';

// 顶部导入自定义方法setLocale
import { setLocale } from 'assets/locale-universal/utils';

const Layout: FC<any> = (props: PropsWithChildren<any>) => {
 const [locale, setLocale] = useState("zh-CN"); 
  // 在事件方法中使用自定义方法setLocale方法
  const toggleI18n = () => {
   const locale = locale==="zh-CN"?"en-US":"zh-CN";
   setLocale(locale)
  }

  return (
    <div>
      <button onClick={toggleI18n}> i18n切换 </button>
    </div>
  );
};

export default Layout;

3. react-intl

  1. 安装依赖

    npm install react-intl --save
// or
yarn add react-intl

  2. 准备langs语言包，在src/locales下新建langs文件夹

    // zh-CN.ts
const zh_CN = {
  hello: "你好"
}
export default zh_CN;

// en-US.ts
const en_US = {
  hello: "Hello"
}
export default en_US

  3. 在locales文件夹下新建I18n.tsx

    import React, { FC } from 'react'
import { FormattedMessage, useIntl } from 'react-intl'

interface IProps {
  children: any,
  value?: any
  defMsg?: string
}

const I118n: FC<IProps> = ({ children, value, defMsg }) => {
  // isAuto：为true时，将自动查找value在语言包里的key值，将其置于组件的id中（有待完善）
  const isAuto = false;
  const intl = useIntl();

  return (
    <div>
      <FormattedMessage
        id={ children}
        defaultMessage={defMsg}
        values={value}
      />
    </div>
  )
}

export default I118n

  4. 在locales文件夹下新建Intl.tsx

    import React, { useState } from 'react'
import { createIntl, MessageFormatElement, RawIntlProvider } from 'react-intl'
import { langs } from './lang'

const Intl = (props: any) => {
  const [locale, setLocale] = useState(navigator.language) // 用于存储选中的语言，默认为浏览器的语言
  let messages: Record<string, string> | Record<string, MessageFormatElement[]> = langs[locale];

  const intl = createIntl({
    locale,
    messages,
    setLocale
  })

  return (
    <RawIntlProvider value={intl}>
      {props.children}
    </RawIntlProvider>
  )
}

export default Intl;

  5. 编写utils.tsx，在locales文件夹下新建utils.tsx

    // 由于在这个工具包里使用了tsx，因此要使用.tsx后缀
import React from 'react'
import I18n from './I18n'

/**
 * Get value from locales pack
 * @param key The key of locales pack
 * @param value The value of Translation
 * @returns Node
 */
export function get(key: string, value?: any) {
  return <I18n value={value}>{key}</I18n>
}

  6. 在mian.tsx/index/tsx中将<App/>包裹起来

    import './index.less';
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';
import Intl from './assets/locale-intl/Intl'

ReactDOM.render(
  <React.StrictMode>
    <Intl>
      <App />
    </Intl>
  </React.StrictMode>,
  document.getElementById('root'),
);

  7. 在需要国际化的页面使用

    import React from 'react';
import http from 'services'
import { get } from 'assets/locales/utils'

const Welcome = () => {

  return (
      {getIntl("name", { name: "zhangsan " })}
  );
};

export default Welcome;

  8. 如何切换语言

    // 由于react-intl没有提供切换语言的方法（可能是我没找到），因此在编写 Intl.tsx 时向里面注入了一个setLocale()方法，可以使用这个方法实现语言的切换

// 需要切换的页面
// 顶部导入 useIntl hook
import { useIntl } from 'react-intl';
const Layout = ()=>{
  
  // 实例一个intl
  const intl = useIntl()
  
  // 使用自定义方法设置语言
  const toggleI18n = () => {
     const locale = locale==="zh-CN"?"en-US":"zh-CN";
     intl.setLocale(locale)
   }

  return (
    // ...
    <button onClick={toggleI18n}> i18n切换 </button>
  )
}

export default Layout

    4. 三者的对比

    名称实现方式无感刷新手动语言切换迁移难度使用方式
    react-intl使用hook支持注入setLocale实现需要包裹<App />组件组件
    react-i18next使用hook支持自带changeLanguage()方法在入口文件引入函数
    react-intl-universal使用内置方法不支持通过刷新地址栏实现在入口文件引入函数
Sanmws
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用i18nexti18n生态系统实现react国际化
08-11
使用i18next i18n生态系统，实现react国际化
国际化 i18n
cdxgg1102225556的博客
04-22 214
先在utlis中创建一个 i18n.js的文件夹 import i18n from ‘i18next’; import { initReactI18next, useTranslation } from ‘react-i18next’; import { zh, en } from ‘@/constants/local’ const lng = ‘en’;//默认的语言 i18n .use(initReactI18next) // passes i18n down to react-i18next 将i1
推荐一款高效React国际化工具：react-intl-linter
最新发布
gitblog_00030的博客
04-05 441
推荐一款高效React国际化工具：react-intl-linter 项目地址:https://gitcode.com/Styx11/react-intl-linter 项目简介 react-intl-linter 是一个基于ESLint插件的开源项目，专为React应用提供国际化的代码审查工具。它可以帮助开发者遵循最佳实践，确保你的应用中的所有国际化消息都被正确处理，避免遗漏和错误。 技术分析 ...
react 国际化的实现代码示例
10-18
主要介绍了react 国际化的实现代码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-intl实现React国际化多语言的方法
10-14
主要介绍了react-intl实现React国际化多语言的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
react国际化化插件react-i18n-auto使用详解
10-15
主要介绍了react国际化化插件react-i18n-auto使用详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
国际化 react-i18next useTranslation
gao000000的博客
10-27 3151
国际化 react-i18next useTranslation 引用 import { useTranslation } from ‘react-i18next’; 解构t const [t] = useTranslation(); 示例： <div onClick={toggleCollapsed} title={collapsed ? t('EXPAND_SIDEBAR') : t('COLLAPSED_SIDEBAR')} style={{ textAlign: 'right', paddin
深入解析 React-i18next：在 React 中实现国际化（一）
tutututu12345678的博客
01-22 968
是一个基于i18next的 React 绑定库，用于实现国际化。它提供了一种简单而强大的方式，让你的 React 应用轻松支持多语言。
在react项目中如何引入国际化
xxx
07-27 619
原文合集地址如下，有需要的朋友可以关注。
react(Hooks)实现国际化
laishaojiang的博客
06-29 613
转到国际项目组之后，做的项目都是多语言的，上次的项目是用搭建的，所以使用的是这个插件，具体可以看这：vue3实现国际化这次的项目是用搭建的，也顺手整理一下技术栈：Hooks + vite + antd + recoil多语言插件使用的是需要同时安装两个包 在src下新建locals文件夹,包含,,(只做中英文切换) 最后在引入就好了(这里比vue简单些) 至此插件就算配置好了对比vue，在react中使用比较简单，只需要用到方法即可，有两种方式可以使用 直接从中引入 关于还有很多用法，具体还是去
从零开始构建React下的多语言实现
天草降临的博客
01-16 2964
          当前，React是web前端开发最流行的Javascript库之一。随着国家间的交流日益密切，web前端需要有多语言版本，也就是国际化。通行的做法是根据用户的浏览器来自动判断用户使用的语言，但同时也提供一个语言切换按钮。本教程从零开始，介绍了React下web前端实现多语言的过程...
react-translate:无需任何麻烦，也无需任何设置即可翻译您的React应用！
03-18
React翻译 无需任何麻烦，也无需任何设置即可翻译您的React应用！ 特征 翻译功能 翻译组件 允许嵌套翻译 基于计数的单数，复数和零 轻量级（〜3KB） 使用TypeScript构建 约99％的代码覆盖率 正在安装 npm install @federico.moretti/react-translate # or yarn add @federico.moretti/react-translate 例子 基本用法： import React from 'react' ; import ReactDOM from 'react-dom' ; import { TranslateProvider , useTranslate , } from '@federico.moretti/react-translate' ; const translations = { pear
React 的通用国际化 (i18n) 开源库
06-08
将您的伟大项目国际化。 这个库是 translate-maker 的一部分。 在 GitHub 上为这个项目加星标。 安装 通过 npm 安装。 npm install react-translate-maker Versions 如果你使用 react >= 15.4.0 使用 version >= ...
Android Toast使用详解
zhhaitong
07-18 578
Android Toast使用详解开发中常见的使用场景主要有以下几种： 默认Toast 自定义位置Toast 带图片的Toast *自定义View的Toast 默认Toast Toast.makeText(getApplicationContext(), "默认Toast样式", Toast.LENGTH_SHORT).show(); 自定义位置Toast toast = Toast.m
react的路由拦截，类似(beforeRouteLeave)
lixinhua_man的博客
03-22 619
react的路由拦截，类似(beforeRouteLeave)
react使用i18next实现国际化
weixin_42478537的博客
12-16 1411
react使用i18next实现国际化
React 实现多语言（使用i18n）
Zybdads的博客
09-09 1185
React 使用i18n
React 结合 react-i18next 实现中英文切换
weixin_57002812的博客
11-07 1757
是基于i18next的一款强大的国际化框架，可以用于react和应用，是目前非常主流的国际化解决方案。
深入解析 React-i18next：在 React 中实现国际化（二）
tutututu12345678的博客
01-22 408
是一个功能强大而灵活的国际化解决方案，它能够简化多语言应用的开发。通过初始化i18n、使用钩子以及支持高级特性，你可以在 React 中轻松实现国际化。希望这篇博文对你深入理解有所帮助。✨。
react 国际化
11-21
React国际化是指在React应用程序中实现多语言支持的过程。react-intl-universal是一个流行的React国际化库，它提供了一种简单的方法来实现多语言支持。下面是一个简单的演示： 1. 安装react-intl-universal库 ```shell npm install react-intl-universal --save ``` 2. 初始化react-intl-universal ```javascript import intl from 'react-intl-universal'; const locales = { 'en-US': require('./locales/en-US.json'), 'zh-CN': require('./locales/zh-CN.json'), }; class App extends React.Component { state = { initDone: false }; componentDidMount() { intl.init({ currentLocale: 'en-US', locales }).then(() => { this.setState({ initDone: true }); }); } render() { return ( <div> {this.state.initDone && <h1>{intl.get('APP_TITLE')}</h1>} </div> ); } } ``` 3. 在组件中使用react-intl-universal ```javascript import intl from 'react-intl-universal'; class MyComponent extends React.Component { render() { return ( <div> <p>{intl.get('GREETING', { name: 'John' })}</p> <p>{intl.get('FAREWELL', { name: 'Jane' })}</p> </div> ); } } ``` 在上面的代码中，我们首先初始化了react-intl-universal，然后在组件中使用intl.get()方法来获取翻译后的文本。我们还可以使用intl.getHTML()方法来获取翻译后的HTML。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值