一.安装依赖

安装react-i18next和 i18next依赖

npm install react-i18next i18next 或 yarn add react-i18next i18next

二.配置文件

在src下新建i18n文件夹，以存放国际化相关配置，可根据需要添加相应的语言文件

2.1 新建config.js

import i18n from i18next;
import {
          
    initReactI18next } from react-i18next;
//配置中文的配置文件
import translation_zh from ./zh.json;
//配置英文的配置文件
import translation_en from ./en.json;

const resources = {
          
   
  en: {
          
   
    translation: translation_en
  },
  zh: {
          
   
    translation: translation_zh
  }
};

i18n.use(initReactI18next).init({
          
   
  resources,
  lng: zh,
  interpolation: {
          
   
    escapeValue: false
  }
});

export default i18n;

2.2 语言文件示例

en.json

{
          
   
  "header": {
          
   
    "register": "Register",
    "signin": "Sign In",
    "home": "Home"
  },
  "footer": {
          
   
    "detail": "All rights reserved @ React"
  },
  "home": {
          
   
    "mainTip": "Im login page"
  },
  "content": {
          
   
    "description": "this is a chinese graph"
  }
}

zh.json

三.详细使用

首先在index.jsx中引入国际化配置文件

import ./i18n/config;

3.1 类（class）组件中使用

import React, {
          
    Component } from react;
import {
          
    withTranslation } from react-i18next;
class login extends Component {
          
   
  render() {
          
   
    const {
          
    t } = this.props;
    return (
      <div>
        <h1>{
          
   t(home.mainTip)}</h1>
      </div>
    );
  }
}
export default withTranslation()(login);

3.2 函数（function）组件或Hook中使用

import React from react;
import {
          
    useTranslation,Trans } from react-i18next;
function Example() {
          
   
  const {
          
    t, i18n } = useTranslation();
  return (
    <div>
    //第一种方式
      <p>{
          
   t(footer.detail)}</p>
    //第二种方式
      <li><Trans>home.new_arrival</Trans></li>
    </div>
  );
}
export default Example;

3.3 切换语言功能

renderI18n = item => {
          
   
    const {
          
    i18n } = this.props;
    return (
      <Button onClick={
          
   () => i18n.changeLanguage(i18n.language === en ? zh : en)}>
        {
          
   i18n.language === en ? 切换成中文 : 切换成英文}
      </Button>
    );
  };