前言如果我们的项目需要更多的流量，支持其他国家的语言是必不可少的。对于React项目我们该如何实现项目多语言，让工程走向国际化，本文将介绍目前最通用的解决方案i18next。准确是说i18n并不仅仅是为React而生，为了支持React项目，我们还需要引入react-i18next插件。本文将通过简单的例子解释i18next的核心功能，下图是最终效果。

React 支持多语言国际化 -- i18next

## React-i18next

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

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

#### 安装

```
# 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

1. 使用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>
   }
   ```
2. 使用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);
   ```
3. 使用 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'
   }
   ```
4. 使用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-i18next是一款强大的国际化框架forreact/reactnative,基于i18next，其作用就是项目可以实现多语言。下面我将介绍一下react-i18n的使用安装#npm$npminstallreact-i18nexti18next--save初始化配置选项resource:资源初始化lng：使用的语言fallbackLng:兜底语言debug:将日志打印到控制台inter