在项目中快速使用React-i18next

小白

2023年05月24日 11:45· 阅读 4305

React-i18next

是一款强大的国际化框架for react /react native,基于 i18next，其作用就是项目可以实现多语言。

下面我将介绍一下react-i18n的使用

安装

shell
# npm
$ npm install react-i18next i18next --save

初始化

配置选项

resource: 资源初始化
lng：使用的语言
fallbackLng: 兜底语言
debug: 将日志打印到控制台
interpolation: 插值。允许将动态值即成到翻译中 escapeValue --->是否转义传递的值

i18n.ts

ts
import i18n from "i18next";
import {initReactI18next } from "react-i18next";
import ja from "./ja.json";
import en from "./en.json";
import zh from "./zh.json";

export const resources = {
    "ja": {
        translation: ja
    },
    "en": {
        translation: en
    },
    "zh": {
        translation: zh
    }
}

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: "en", // if you're using a language detector, do not define the lng option
    fallbackLng: "en",
    debug: true,
    interpolation: {
      escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
    }
  });

加载

需要在项目入口加载,目的就是初始化，加载资源文件，后续在组件中可以正常翻译。不进行加载的话，下面所说的组件的使用带来的效果就是界面显示的都是key 值而不是对应的value值。这里我以小程序举例

app.tsx

tsx
import './i18n/i18n'

组件中使用

t('key')括号内的内容是翻译文件中对应的key

使用hook方式

tsx
import React from 'react';

// the hook
import { useTranslation } from 'react-i18next';

function MyComponent () {
 const { t, i18n } = useTranslation();
 return <h1>{t('test_text')}</h1>
}

使用HOC方式

tsx
import React from 'react';

// the hoc
import { withTranslation } from 'react-i18next';

function MyComponent ({ t }) {
 return <h1>{t('test_text')}</h1>
}

export default withTranslation()(MyComponent);

使用 render prop

tsx
import React from 'react';

// the render prop
import { Translation } from 'react-i18next';

export default function MyComponent () {
 return (
   <Translation>
     {
       t => <h1>{t('test_text')}</h1>
     }
   </Translation>
 )
}

翻译json文件中

json
{
   'test_text': 'hello world'
}

使用Trans组件

tsx
import React from 'react';
import { Trans } from 'react-i18next';

export default function MyComponent () {
 return <Trans><H1>Welcome to React</H1></Trans>
}

// the translation in this case should be
"<0>Welcome to React</0>": "<0>Welcome to React and react-i18next</0>"

如果是在ts文件中使用

ts
import i18next from './i18n'

i18next.t('my.key')

标签：

React