react中多语言手动更改

1:安装多语言配置项

我们选择i18n

npm install react-i18next i18next --save

2:配置语言选项 我们只配置中英文 新建一个文件夹 locale

然后再里面新建两个文件en.js和ch.js

在里面分别写入代码  就是两个中英文配置

3:在同目录里面新建一个index.js 写入

import  i18n from "i18next";
import {initReactI18next} from 'react-i18next'
import  en from "./en";
import  ch from "./ch";
i18n
  .use(initReactI18next) 
  .init({
    resources: {
      en: {
        translation: en
      },
      zh: {
        translation: ch
      }
    },
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    }
  });
  export  default  i18n;

页面结构如下

注解

 

4:全局引入

5:需要的使用页面

6:效果(最好是将改变的按钮放到全局app.js中)

7:其他需要使用的地方 同理即可